Cara Membuat Menu Drop Down Pada Blog
By Unknown - Friday, September 7, 2012
Untuk cara membuatnya, ikuti langkah-langkah di bawah ini :
1. Cari kode berikut ]]></b:skin>
2. Lalu letakkan kode berikut ini.
2. Lalu letakkan kode berikut ini.
#navdropdownmenu{background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0OJSEQ2Q9XlJi4dndgOlGdoIcb_peyvR-1_HuQtgwHdlck8ForoOxIsAH2S6B8724IOkANsAK0pvcWlSlUYEaDDPn9Vj0MEf6UOqDogmGCWAnj9RwWrFU2xncXNK7V-FEGxK_8V8tPWJ4/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/AVvXsEj0OJSEQ2Q9XlJi4dndgOlGdoIcb_peyvR-1_HuQtgwHdlck8ForoOxIsAH2S6B8724IOkANsAK0pvcWlSlUYEaDDPn9Vj0MEf6UOqDogmGCWAnj9RwWrFU2xncXNK7V-FEGxK_8V8tPWJ4/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;
}
Jika anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari navigasi menu tersebut.
3. Cari kode yang mirip dengan kode dibawah.
<div id='header-wrapper'>4. Dibawahnya, ketikkan kode berikut.
<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>
<div id='navdropdownmenu'><ul id='navdropdownmenu'><li><a href='http://panitah.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'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://panitah.blogspot.com dengan link yang anda inginkan dengan url yang anda inginkan. Anda bisa menambah atau mengurangi jumlah kode tersebut.
5. Klik Simpan Template.
Follow our blog on Twitter, become a fan on Facebook. Stay updated via RSS
0 komentar for "Cara Membuat Menu Drop Down Pada Blog"