Membuat menu dropdown di blog

Menu drop down biasanya digunakan oleh para blogger untuk mengurangi lebar penggunaan latar blog dan digunakan untuk mempercantik suatu blog karna jika menggukan menu drop down, maka tampilan blog akan terlihat lebih teratur. Baik sob gak usah panjang lebar langsung saja ikuti tutorial berikut ini:

1. Masuk ke akun blogger sobat

2. Pilih template > klik edit HTML
3. Kemudian sobat cari kode ]]></b:skin>
4.  Lalu copy dan pastekan kode dibawah ini diatas kode ]]></b:skin>

/*Menu Drop Down*/
#menudropdown  {
background:#461B7E;
width: 100%;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#menudd {
margin: 0;
padding: 0;
}
#menudd  ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menudd  li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#menudd li a, #menudd li a:link, #menudd li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#menudd li a:hover, #menudd li a:active {
background: #461B7E;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#menudd li {
float: left;
padding: 0;
}
#menudd li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#menudd li ul a {
width: 140px;
}
#menudd li ul ul {
margin: -25px 0 0 161px;
}
#menudd li:hover ul ul, #menudd li:hover ul ul ul, #menudd li.sfhover ul ul, #menudd  li.sfhover ul ul ul {
left: -999em;
}
#menudd li:hover ul, #menudd li li:hover ul, #menudd li li li:hover ul, #menudd li.sfhover ul, #menunav li li.sfhover ul, #menunav li li li.sfhover ul {
left: auto;
}
#menudd li:hover, #menudd li.sfhover {
position: static;
}
#menudd li li a, #menudd li li a:link, #menudd li li a:visited {
background:#461B7E;
width: 120px;
color: #FFF;
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;
}
#menudd li li a:hover, #menudd li li a:active {
background:#8E35EF;
color: #FFF;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}


5. Klik simpan template dan tutup
6. Kemudian sobat masuk ke rancangan > tata letak
7. Klik tambah gadget > pilih HTML/javascrypt
8. Copy dan paste kode di bawah ini di dalam HTML/javascrypt tadi

<div id='menudropdown'>
<ul id='menudd'>
<li>
<a href='masukan alamat blog sobat disini'>Home</a>
</li>
<li>
<a href='masukan alamat blog sobat disini'>Download</a>
</li>
<li>
<a href="masukan alamat blog sobat disini">Tutorial</a>
</li>
<li>
<a href='masukan alamat blog sobat disini'>Profil</a>
</li>
<li>
<a href='masukan alamat blog sobat disini'>Contact Us</a>
<ul>
<li><a href='masukan alamat blog sobat disini'>Facebook</a></li>
<li><a href='masukan alamat blog sobat disini'>Twitter</a></li>
<li><a href='masukan alamat blog sobat disini'>Google+</a></li>
</ul>
</li>
</ul>
</div>


Note: Ganti "masukan alamat blog sobat disini" dengan url blog sobat
          contoh: http://cahblk.blogspot.com/
         Ganti tulisan yang berwarna merah dengan tulisan yang sobat inginkan (tampilkan)