Cara Membuat Menu Drop Down

1. Cari kode berikut ]]></b:skin>
2, Lalu letakkan kode berikut ini diatas kode ]]></b:skin>

#navdropdownmenu{ background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLsOULV22fG-JcZNVBTHJ05brG_xrjOAQ0U4BoN-BxfCnjC8UAh9cD0di_Unlrqh09Gs757RNcU78Gt6duRTo1BytPD_8NdQCbYvBY5P9YGpiq2Dy8ZPX2yFWbZvwcZ6sL6xsdZqeh3q1i/s800/navbar.gif) repeat-x top; width:700px; height:auto; margin:0; padding:0; border-top: 1px solid #AFAFAF; border-bottom: 1px solid #FFFFFF; } #navdropdownmenu ul{ float:left; list-style:none; margin:0; padding:0; } #navdropdownmenu li{ list-style:none; float:left; } #navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{ color:#000000; font-weight:bold; display:block; text-shadow: 0px 1px 1px #fff; padding:9px 10px 9px 10px; font-size: 12px; font-family: verdana; text-decoration:none; } #navdropdownmenu li a:hover{ background:#9f9f9f; color:#ffffff; } #navdropdownmenu li ul{ z-index:10; position:absolute; height:auto; width:200px; visibility:hidden; } #navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{ float:none; background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLsOULV22fG-JcZNVBTHJ05brG_xrjOAQ0U4BoN-BxfCnjC8UAh9cD0di_Unlrqh09Gs757RNcU78Gt6duRTo1BytPD_8NdQCbYvBY5P9YGpiq2Dy8ZPX2yFWbZvwcZ6sL6xsdZqeh3q1i/s800/navbar.gif) repeat-x top; width:200px; border-width:1px; border-style:solid; border-color:#575757; } #navdropdownmenu li ul li a:hover{ background:#000000; color:#ffffff; } #navdropdownmenu li:hover ul{ left:auto; visibility:visible; }

KETERANGAN :

• Jika anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari navigasi menu tersebut.

3. Cari kode yang mirip dengan kode dibawah ini

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='It's a Hardlife' type='Header'/> </b:section> </div>

4. Dibawahnya, ketikkan kode berikut ini

<div id='navdropdownmenu'> <ul id='navdropdownmenu'> <li><a href='http://wongsuruh.blogspot.com/search?max-results=1000'>Daftar Isi</a></li> <li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Norah Jones</a> <ul> <li><a href='#'>Don&#39;t Know Why</a></li> <li><a href='#'>Feelin The Same Way</a></li> <li><a href='#'>Come Away With Me</a></li> </ul> </li> <li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sting</a> <ul> <li><a href='#'>Englishman In Newyork</a></li> <li><a href='#'>Shape Of My Heart</a></li> <li><a href='#'>Fields Of Gold</a></li> <li><a href='#'>If I Ever Lose My Faith In You</a></li> <li><a href='#'>Fragile</a></li> <li><a href='#'>Desert Rose</a></li> </ul> </li> <li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sade</a> <ul> <li><a href='#'>Smooth Operator</a></li> <li><a href='#'>Kiss Of Life</a></li> <li><a href='#'>Your Love Is King</a></li> </ul> </li> <li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Alanis</a> <ul> <li><a href='#'>That I Would Be Good</a></li> <li><a href='#'>Front Row</a></li> <li><a href='#'>One</a></li> </ul> </li> <li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Meja</a> <ul> <li><a href='#'>Dindi</a></li> <li><a href='#'>Venus</a></li> <li><a href='#'>Red Light</a></li> <li><a href='#'>The One</a></li> <li><a href='#'>Circle Game</a></li> <li><a href='#'>Aqua de Beber</a></li> </ul> </li> </ul> </div>

Gantilah tulisan http://wongsuruh.blogspot.com dengan link yang anda inginkan dengan url yang anda inginkan. Anda bisa menambah atau mengurangi jumlah kode tersebut.

5. Klik Simpan Template.

Sumber : http://creatingwebsite-maskolis.blogspot.com/2011/03/membuat-menu-drop-down-di-blogspot.html

--- oOo ---