belajar templete

Ini adalah model drop down bertingkat yang bisa mengakomodir anatara menu dan submenu kemudian sub submenu dst. terserah kebutuhan; juga bisa saja hanya memasang menu saja (label) untuk lebih simpelnya. Untuk contoh silakan lihat di bagian atas blog ini.

Skripnya adalah:

<style>

#menu

{

width: 100%;

margin: 0;

padding: 10px 0 0 0;

list-style: none;

background: #000000;

background: -moz-linear-gradient(#444, #000000);

background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-border-radius: 50px;

border-radius: 50px;

-moz-box-shadow: 0 2px 0px #9c9c9c;

-webkit-box-shadow: 0 2px 0px #9c9c9c;

box-shadow: 0 2px 0px #9c9c9c;

}

#menu li

{

float: left;

padding: 0 0 10px 0;

position: relative;

line-height: 0;

}

#menu a

{

float: left;

height: 25px;

padding: 0 25px;

color: #999;

text-transform: uppercase;

font: bold 12px/25px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#menu li:hover > a

{

color: #fafafa;

}

*html #menu li a:hover /* IE6 */

{

color: #fafafa;

}

#menu li:hover > ul

{

display: block;

}

/* Sub-menu */

#menu ul

{

list-style: none;

margin: 0;

padding: 0;

display: none;

position: absolute;

top: 35px;

left: 0;

z-index: 99999;

background: #444;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);

-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);

box-shadow: 0 0 2px rgba(255,255,255,.5);

-moz-border-radius: 5px;

border-radius: 2px;

}

#menu ul ul

{

top: 0;

left: 150px;

}

#menu ul li

{

float: none;

margin: 0;

padding: 0;

display: block;

-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

}

#menu ul li:last-child

{

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#menu ul a

{

padding: 10px;

height: 10px;

width: 130px;

height: auto;

line-height: 1;

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

*html #menu ul a /* IE6 */

{

height: 10px;

}

*:first-child+html #menu ul a /* IE7 */

{

height: 10px;

}

#menu ul a:hover

{

background: #0186ba;

background: -moz-linear-gradient(#04acec, #0186ba);

background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

background: -webkit-linear-gradient(#04acec, #0186ba);

background: -o-linear-gradient(#04acec, #0186ba);

background: -ms-linear-gradient(#04acec, #0186ba);

background: linear-gradient(#04acec, #0186ba);

}

#menu ul li:first-child > a

{

-moz-border-radius: 5px 5px 0 0;

border-radius: 5px 5px 0 0;

}

#menu ul li:first-child > a:after

{

content: '';

position: absolute;

left: 30px;

top: -8px;

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 8px solid #444;

}

#menu ul ul li:first-child a:after

{

left: -8px;

top: 12px;

width: 0;

height: 0;

border-left: 0;

border-bottom: 5px solid transparent;

border-top: 5px solid transparent;

border-right: 8px solid #444;

}

#menu ul li:first-child a:hover:after

{

border-bottom-color: #04acec;

}

#menu ul ul li:first-child a:hover:after

{

border-right-color: #04acec;

border-bottom-color: transparent;

}

#menu ul li:last-child > a

{

-moz-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}

/* Clear floated elements */

#menu:after

{

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

* html #menu { zoom: 1; } /* IE6 */

*:first-child+html #menu { zoom: 1; } /* IE7 */

</style>

<ul>

</ul>

</li>

<ul>

<ul>

</ul>

</li>

</ul>

</li>

<ul>

</ul></li></ul>

Keterangan:

1. Silakan ganti tulisan berwarna merah namablog.blogspot.com dengan URL alamat blog anda.

2. Skrip ini bisa dipasang di side bar (luar artikel) atau pun di dalam artikel.

- Untuk di sede bar, seperti bisa anda ke edit blogger- Tata letak - Tambah Gadget, dst.

- Untuk di dalam artikel, anda mesti ke Template-Edit HTML dst., dan agar bisa terpasang di bagian paling atas blog, silakan copas skrip ini di atas kode </head>.

Saturday, 24 September 2016

Test Templete free Download 2016

Thursday, 15 September 2016

Kajian Seputar Islam: Benarkah Isa Al-Masih adalah Tuhan ?

Menu DropDown Blogger