Membuat Drop Down Menu Otomatis di

Satu trik mempercantik blog lagi.

Sebelumnya saya sudah menulis gimana caranya membuat drop down menu yang bisa di letakkan di sembarang tempat di blog kamu, kali ini saya akan membahas gimana caranya membuat drop down menu di header.

Caranya seperti basa,


login dulu ke Blogger >> Design >> Edit HTML >> Expand Widget Template
Temukan kode </head>
Kopikan kode berikut di atas kode </head> .

<script type="text/javascript"
src="http://izoelsdropdownmenu.googlecode.com/files/izoelmenu.js">
</script>

.
Selanjutnya Cari Kode ]]></b:skin> , tambahkan kode berikut ini di atas kode ]]></b:skin>.

.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://i1191.photobucket.com/albums/z464/izoel1/chromebg2-over.png) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: center;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(http://i1191.photobucket.com/albums/z464/izoel1/chromebg2-over.png) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #EBF7FF;
}

.
 
Kemudian cari struktur kode yang minimal mirip dengan struktur seperti di bawah ini

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

.
Kalau sudah ketemu kopikan kode berikut tepat di bawah struktur di atas pada langkah sebelumnya

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://alexander-zulkarnain.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

.
Coba perhatikan tulisan yang berwarna hijau struktur tersebut. Tulisan "dropmenu1" dan "dropmenu2" tersebut merupakan atribut rel dari parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat 2 menu drop down, yaitu "Menu1" dan "Menu2" (warna kuning). Jika pembaca ingin menambah menu drop down lagi misalnya "Menu3", maka buatlah juga atribut rel untuk "Menu3" tersebut misalnya "dropmenu3", setelah itu tambahkan struktur menu drop down untuk "Menu3" setelah menu drop down kedua
Perhatikan bahwa nama atribut ID untuk menu drop down ketiga harus sama dengan nama atribut rel untuk "Menu2" yaitu "dropmenu2". Begitu pula jika pembaca ingin menambah menu drop down keempat, kelima, dan seterusnya.
Langkah terakhir, simpan template kamu dan ucapkanlah alhamdulillah
Silakan mencoba