Cara membuat menu drop down di blogspot adalah sebagai berikut:
- Sign ke Blogger > Design > Page Elements
- Pilih dan tambahkan Gadget HTML/JavaScript yang berada di bawah Header blog anda dan tambahkan kode dibawah ini:
<div id='mbtnavbar'><ul id='mbtnav'><li><a href='#'>Beranda</a></li><li><a href='#'>Tentang saya</a></li><li><a href='#'>Produk</a></li><li><a href='#'>Kontak</a>
<ul><li><a href='#'>Facebook</a></li><li><a href='#'>Twitter</a></li><li><a href='#'>Yahoo</a></li></ul></li>
</ul></div>
Keterangan:
- Ganti tanda # dengan lamat url yang diinginkan
- Apabila ingin menambah menu anda tinggal menambahkan kode di-bawah sebelum kode </ul>
<li>
<a href='#'>Tab Name</a>
</li>
- Sekarang masuk ke Design > Edit HTML
- Untuk jaga-jaga apabila ada kesalahan, silahkan anda download dulu template anda sebagai back up.
- Cari kode ]]></b:skin>
- Tambahkan kode di-bawah tepat sebelum kode ]]></b:skin>
/*----- MBT Drop Down Menu ----*/
#mbtnavbar {background: #000000;width: 880px;color: #FFF;margin: 0px;padding: 0;position: relative;border-top:0px solid #000000;height:35px;
}
#mbtnav {margin: 0;padding: 0;}#mbtnav ul {float: left;list-style: none;margin: 0;padding: 0;}#mbtnav li {list-style: none;margin: 0;padding: 0;border-left:1px solid #DDD;border-right:1px solid #DDD;height:35px;}#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {color: #000;display: block;font:normal 12px Helvetica, sans-serif;margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;
}#mbtnav li a:hover, #mbtnav li a:active {background: #809FFE;color: #FFF;display: block;text-decoration: none;margin: 0;padding: 9px 12px 10px 12px;}
#mbtnav li {float: left;padding: 0;}#mbtnav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 160px;margin: 0;padding: 0;}#mbtnav li ul a {width: 140px;}#mbtnav li ul ul {margin: -25px 0 0 161px;}#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {left: -999em;}#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {left: auto;}#mbtnav li:hover, #mbtnav li.sfhover {position: static;}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {background: #809FFE;width: 120px;color: #000;display: block;font:normal 12px Helvetica, sans-serif;margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;z-index:9999;border-bottom:1px dotted #333;
}#mbtnav li li a:hover, #mbtnavli li a:active {background: #2646A6;color: #FFF;display: block;margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;}
Keterangan:
Silahkan Ganti kode yang saya tandai merah di-atas sesuai dengan keinginan anda.
0 komentar:
Speak up your mind
Tell us what you're thinking... !