Cara Mudah Membuat Menu Laman Dropdown

Cara Mudah Membuat Menu Dropdown. Itulah judul postingan kali ini, pernahkah anda melihat suatu blog atau website yang menggunakan menu laman dropdown??  Sangat indah bukan?? Saya dulu juga seperti anda, waktu itu saya sangat ingin menambahkan menu laman itu juga, tetapi saya belum tahu apa kata kuncinya. Karena saya memang suka baca-baca tutorial blog-blog lain, akhirnya ketemu deh...  dan sekarang akan saya bagikan tutorialnya...... Simak Terus....

Menggunakan menu laman dropdown selain membuat rapih blog juga mempermudah pengunjung menjelajahi blog kita lho....   Makanya, ayo Langsung Coba...   Dibawah ini adalah langkah-langkah Mudah Membuat Menu Laman Dropdown


Cara Mudah Membuat Menu Laman Dropdown

1. Buka Blogger >> Tata Letak

2. Pilih "Tambahkan Gadget"

3. Pilih "HTML/JavaScript"

4. Pastekan kode dibawah ini

<style> #menunavigasihorisontal { background: #848484; width: 100%; color: #FFF; margin: 10px 0; padding: 0; position: relative; border-top:0px solid #960100; height:35px; } #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:bold 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 11px 12px; text-decoration: none; border-right:0px solid #627AAD;} #bb2nav li a:hover, #bb2nav li a:active { background: #2E9AFE; 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: #3B5998; display: block; font:normal 12px Helvetica, 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 12px 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: #627AAD; color: #FFF; display: block;} </style> <div id='menunavigasihorisontal'> <ul id='bb2nav'> <li> <a href='/'> Home</a> </li> <li> <a href='#'>About ?</a> <ul> <li><a href='#'>Facebook</a></li> <li><a href='#'>Twitter</a></li> <li><a href='#'>Google +</a></li> </ul> </li> <li> <a href='#'>Software ?</a> <ul> <li><a href='#'>PC</a></li> <li><a href='#'>MOD</a> <ul> </li> </ul> </li> <li> <a href='#'>Tutorial ?</a> <ul> <li><a href='#'>Tutorial</a></li> <li><a href='#'>Tutorial Blog</a></li> <li><a href='#'>Tutorial Facebook</a> <ul> </li> </ul> </li> </ul> </div>

Yang bertanda "#"  ganti dengan url sesuka mu

5. Klik "Simpan Setelan"

Sekarang blog anda sudah menggunakan Menu laman dropdown.... hahaha.... gimana???

Itulah Cara Mudah Membuat Menu Laman Dropdown. Terima kasih anda telah membaca artikel ini, jika anda ingin tutorial blog yang lainnya silahkan buka alamat url dibawah ini
tutorial

Sekian dari saya, semoga berhasil dan selalu beruntung ya......
Salam 3Defit