Cara Membuat Menu Dropdown Blog Menjadi Keren

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f) untuk pencarian lebih cepat
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
/*--------------Start Menu--------------------------------- */
#menubar{ width:1010px; height:32px; float:center; margin-bottom:3px; background-color: #3B4912; background-image: -webkit-gradient(linear, left top, left bottom, from(#3B4912), to(#FCFDFA)); background-image: -webkit-linear-gradient(top, #ebf3fc, #3B4912); background-image: -moz-linear-gradient(top, #ebf3fc, #3B4912); background-image: -ms-linear-gradient(top, #ebf3fc, #3B4912); background-image: -o-linear-gradient(top, #ebf3fc, #3B4912); background-image: linear-gradient(top, #ebf3fc, #3B4912); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; border-top: none; } #menubar ul{ float:left; margin:0; padding:0; } #menubar li{ float:left; list-style:none; margin:0; padding:0; } #menubar li a, #menubar li a:link{ float:left; padding:8px 12px; color:#fff; text-decoration:none; font-size:13px; font-weight:bold; } #menubar li a:hover, #menubar li a:active, #menubar .current_page_item a { background: #E89011; color: #fff; text-decoration:none; } #menubar li li a, #menubar li li a:link, #menubar li li a:visited{ font-size: 12px; background: #E89011; color: #fff; text-decoration:none; width: 150px; padding: 0px 10px; line-height:30px; } #menubar li li a:hover, #menubar li li a:active { background: #E16E08; color: #ffffff; } #menubar li ul{ z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin-top:32px; border:1px solid ##ff0000; } #menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{ left:auto } #menubar li:hover, #menubar li.sfhover{ position:static } /*--------------End Menu--------------------------------- */
6. Selanjutnya cari kata </header> (gunakan ctrl+f)
7. Pasang kode dibawah ini tepat dibawah </header>  yang sobat cari tadi (pada No. 6)
   
<!-- Start Menu Header -->
<div align='center' id='content-wrapper'>        
<div id='menubar'>      
 <ul> <li><a href='http://tbenzholong.blogspot.com'>Menu1</a></li>       
<li><a href='http://tbenzholong.blogspot.com'>Menu2</a></li>       
 <li><a href='http://tbenzholong.blogspot.com'>Menu3</a></li>        
<li><a href='http://tbenzholong.blogspot.com'>Menu4</a></li>        
<li><a href='http://tbenzholong.blogspot.com'>Menu5</a>
<ul>              
<li><a href='https://www.facebook.com/SukaSukaTapiAsyik'>Facebook</a></li>                 
<li><a href='https://twitter.com/hotbenpasyaribu'>Twitter</a></li>       
</ul></li>      
<li><a href='http://tbenzholong.blogspot.com>Menu6</a></li>            
</ul>      
</div>    
</div>      
<!-- End Menu Header -->
8. Simpan Template dan Lihat hasilnya
   
   Keterangan
   
   • Sesuaikan lebar menu dengan template sobat dengan mengganti yg berwarna Hijau
   • Gandi yang berwarna biru sesua dengan warna menu yg sobat inginkan
   • Yang bergaris bawah adalah untuk menu dropdown
   • Ganti tulisan yang warna merah dengan link blog sobat sesuai dengan menu
   • Tulisan Menu1-Menu5 adalah nama menu silahkan ganti sesuai dengan keinginan sobat
   • Tulisan Facebook dan Twitter adalah untuk SubMenunya
     
     Ok Sekian postingan Saya kali ini silahkan dicoba, semoga bermanfaat...
     Salam......