Cara Membuat Navigation Bar (Navbar) Menu Dropdown

Sebagai seorang blogger, Anda pasti mengiginkan penampilan yang menarik pada blog Anda. Hal itu dapat Anda penuhi dengan memulai membuat navigation bar (navbar) yang simple tapi mudah digunakan. Di sini Bujang Uchiha akan berbagi tutorial untuk membuat navbar sebagai mana yang digunakan oleh blog Bujang Uchiha ini. Ikuti langkah-langkahnya dengan baik ya....

1.  Buka Dasbor Blogger Anda
2.  Pada pulldown menu di samping judul blog, pilih Template
3.  Pada jendela Template, Download Full Template untuk mengantisipasi kegagalan
4.  Kemudian pilih Edit HTML
5.  Pada kotak HTML buka semua segmen (klik pada panah hitam di pinggir kotak)
6.  Cari kode ]]</b:skin> dan pastekan kode berikut di atasnya

#navdropdownmenu{ background:#99C9FF url(http://i1294.photobucket.com/albums/b616/Muzaiwa_uzumaki/navbar_zpsa5abb963.gif) repeat-x top;
width:700px;
height:auto;
margin-bottom:50px;
margin-left:150px;
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:auto;
visibility:hidden;
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:#99C9FF url(http://i1294.photobucket.com/albums/b616/Muzaiwa_uzumaki/navbar_zpsa5abb963.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;
}

catatan:
bagian dari kode ini semuanya dapat di edit sesuai harapan Anda untuk blog Anda. Yang terpenting Anda mengerti apa maksud kode di atas. Jika enggan untuk mengerti maksud kode di atas, sebaiknya biarkan saja seperti ini.

7. Kemudian cari kode </header> dan pastekan kode berikut di bawahnya

<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>
<li><a href='#'>MENU 1</a></li>
<li><a href='#'>MENU 2</a>
<ul>
<li><a href='#'>Submenu 2a</a></li>
<li><a href='#'>Submenu 2b</a></li>
<li><a href='#'>Submenu 2c</a></li>
</ul>
</li>
<li><a href='#'>MENU 3</a></li>
<li><a href='#'>MENU 4</a></li>
</ul>
</div>

catatan:
- ganti hanya yang warna biru dengan link halaman Anda
- ganti hanya warna hijau dengan judul halaman Anda
- ganti hanya yang warna kuning dengan judul anak halaman Anda 

8.  Save Template Anda, dan lihat hasilnya....

Demikianlah tutorial dari Bujang Uchiha mengenai menu dropdown, semoga dapat diaplikasikan dengan baik dan Terima Kasih....