Sangat mudah untuk membua menu drop down pada blogspot seperti di atas tanpa melakukan edit HTML, cukup dengan menambahkan gadget saja di bawah header blog.
Caranya:
Buka Dasbor > Tata Letak> Tambah Gadget (dibawah header)
Kemudian masukkan kode berikut ini:
<style>
#menunavigasihorisontal {
background: #ff7474;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:50px; }
#bb2nav {
margin: 0;
padding: 0;}
#bb2nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;}
#bb2navli {
list-style: none;
margin: 0;
padding: 0;}
#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
color: #FFF;
display: block;
font:normal 16px crushed, oswald;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;}
#bb2nav li a:hover, #bb2nav li a:active {
background: #91857f;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;}
#bb2nav li {
float: left;
padding: 0;}
#bb2nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;}
#bb2nav li ul a {
width: 140px;}
#bb2nav li ul ul {
margin: -25px 0 0 161px;}
#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
left: -999em;}
#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
li li li.sfhover ul {
left: auto;}
#bb2nav li:hover, #bb2nav li.sfhover {
position: static;}
#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #e06666;
display: block;
font:normal 14px Arial, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;}
#bb2nav li li a:hover, #bb2nav li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 14px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;}
#bb2nav li li li a:hover, #bb2nav li li li a:active {
background: #e06666;
color: #FFF;
display: block;}
</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a href='http://www.tettytanoyo.com'>Home</a>
</li>
<li>
<a href='#'>About Me</a>
</li>
<li>
<a href='#'>This Blog</a>
<ul>
<li><a href='http://www.tettytanoyo.com/search/label/Tips'>Tips</a></li>
<li><a href='http://www.tettytanoyo.com/search/label/Blogging'>Blogging</a></li>
<li><a href='http://www.tettytanoyo.com/search/label/Diary'>Diary</a></li>
</ul>
</li>
<li>
<a href='#'>Other ▼</a> <ul>
<li><a href='http://www.tettytanoyo.com/search/label/Giveaway'>Giveaway</a></li>
<li><a href='http://www.kurikulumdanpembelajaran.blogspot.com'>Kurikulum</a></li>
<li><a href='http://www.tettytanoyo.com/search/label/Puisi'>Puisi</a>
<ul>
<li><a href='#'>Sub Sub Menu 1</a></li>
<li><a href='#'>Sub Sub Menu 2</a></li>
<li><a href='#'>Sub Sub Menu 3</a></li>
</ul>
</li>
</ul> </li>
</ul>
</div>
Kode yang saya beri warna adalah kode yang bisa diubah sesuai selera. Seperti font, warna, ukuran font, dan lainnya. (silakan diutak-atik sambil berkreasi)
Untuk mengetahui kode warna, biasanya saya melihat pada pengaturan di blogspot sendiri.
Masuk ke dasbor>template>sesuaikan.
Selesai
Selamat Mencoba, Semoga Bermanfaat :)
Related Post:
nice info...pengen nyoba...
ReplyDeleteTerima kasih sudah mampir kesini :)
Deletewow kodenya banyak juga ya mak hehe
ReplyDeleteIya, Copy Paste aja :)
DeleteSemuanya di copy ya mak..? Nyobain ah..
ReplyDeleteMakasih sharingnya ya mak..
Iya, nanti tinggal diganti aja warna, font, dll sesuai selera :)
ReplyDeleteWihihiiii, blognya makin cantik nih :D
ReplyDeletetidak lebih cantik dari mak Mimi :)
Deletedan saya baru tahu kalau itu namanya drop drop down hehe..makasih mak^^
ReplyDeleteSaya juga tau dari buku sama googling :)
DeleteMakasih ilmunya mak, sudah saya praktekkan :D
ReplyDeleteTerimakasih ilmunya, mau nyoba aah
ReplyDeletemak, ini beda sama laman ya
ReplyDeletekalo dari fungsi, menurut saya hampir sama mak, Cuman kalo drop down lebih dinamis aja gitu liatnya..
DeleteMakasih lho infonya ^_^
ReplyDeletesama-sama :)
Deletewah dapet ilmu baru nih, ntar malem dicoba ahh, makasih mak
ReplyDeleteTapi untuk blogspot ya mba..Biasanya aku minta tolong ke web designerku kalo ada yg mau diganti ato tambah dari blog :D Tapi tulisan ini berguna nih kalo suatu saat aku mw beljar sendiri :)
ReplyDeleteArigato kak buat infonya >/^\< udah sy coba, dan berhasil :"DD *tebarbunga*
ReplyDeletebermanfaat bgt mbak hehe :D kunjungin balik ya
ReplyDeleteMakasih mas bro atas infonya
ReplyDeletemakasi banyak mbak, akhirnya saya nemu tutorial simple tapi tokcer.. :) salam kenal ya mbak
ReplyDeleteKalau ingin nambah sub menu ke-2 dari sub menu bagaimana caranya? Terima kasih.
ReplyDeleteMbak Tety... thanks ya. jadi semangat lg.
ReplyDeletesub Sub menunya pada puisi kok ga muncul ya.....
ReplyDeleteSalam kenal dan persahabatan untuk semua dan khususnya admin diblog ini.
ReplyDeleteOk terimakasih
ReplyDeleteMak mau tanya kok Daftar Isi ku malah balik ke Home x_x
ReplyDeletebagus, bagus, bagus, tapi belum dicoba
ReplyDeletethanks membantu sngat sis
ReplyDeleteBOOOOM!! succesful.
ReplyDeletevisit back www.puteraseptiana.blogspot.com
arigatou gozaimase
terimaksih abnyak ilmu nya ya gan bermanfaat banget sya sedang membuat blog aneka resep masakan bisa sekalian di bimbing gan jika berkenan
ReplyDeleteheheeeheeeeee
halo mba. saya mau tanya cara menghilangkan buletbulet di sampingnya menu bagaimana ya? terimakasih
ReplyDelete