Cara Membuat Menu Bar Dropdown

     Cara Membuat Menu Bar Dropdown - Hai semua AiRa LoKa best friend... kali ini saya mau bagi-bagi tutorial tentang Cara Membuat Menu Bar Dropdown.

     Menubar dropdown lebih menguntungkan dari pada menggunakan menubar biasa. Dikarnakan kita dapat menghemat tempat untuk pengelompokan label-label yang sejenis. Kita dapat membuat beberapa kelompok seperti software yang didalamnya terdapat label-label seperti antivirus, converter, cd burner, download manager(lihat gambar disamping).

     Anda bisa mengubah-ubah menu-menu yang sudah saya berikan. Andapun juga menambahkan menu-menu lainya. Atau bahkan anda bisa menambahkan logo blog anda jika anda mau(kalau bisa). Nah, bagi yang mau coba, Langsung saja..

Cek It Out......

1.  Masuk ke Blogger > Dashboard Blogger > Template > Edit HTML. Jangan lupa untuk centang/cheklist pada expand template widget. Lebih baik anda BACKUP terlebih dahulu template anda sebelum membuka panel edit html agar bisa dikembalikan seperti semula semisal terjadi kegagalan saat mencoba.

2.  Cari kode ]]></b:skin> (gunakan F3 atau Ctrl+F untuk memudahkan dalam pencarian), kemudian letakkan kode dibawah ini diatas kode ]]></b:skin>.

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgghF629AcynkqQ350m0feH96TARIT6RkM_ATszwm3hO6k4QPnwlacYpmiU1mcLbQEgBZJikVuInXuyfgxN7wEXs9xfj68dSnTuh31q6GgMfpLTbILGHyLEC8hMY80b9fY67fJ-BTiQRdw/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRPQPQTTiJY7-qC6em9_tPyRo2nYYlWhiGp51_RvTJYFfqrOr50myoDJYU3t4zdf7ZPnaZN3T8uaCvTuAfIVEe6VYl-f7cYg5tmmZpNgUXFNoWXTg2idEIBPF5a0SxtKnehScC0hPlo70/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

3.   Selanjutnya anda harus meletakkan kode dibawah ini di atas kode <header> (kalau ingin menubar anda berada diatas judul blog anda) atau dibawah kode </header> (kalau ingin menubar anda berada dibawah judul blog anda). 
Kode yang berwarna biru bisa anda ganti dengan kategori menu anda. contoh: Software, Game, dan lain sebagainya. 

<div id='menuwrapperpic'> 
 <div id='menuwrapper'> 
  <ul id='menubar'> 
   <li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcAeui-6qc3BP8aXCKc8BvNlTvlKR5p4gB7s1mgLR-AJyQkOhXtNkx1A3O_ZhtHFCeVlh3tbVahLkiFYJ4qi4YnmX43sLvmLPQ9AOBWSarLO_nW3ibWjcMZFs9l-UI857hUNRDOBLzJrU/s1600/home_white.png' style='padding:0px;'/> Home</a></li> 
   <li><a href='https://plus.google.com/u/0/105117023814492818484/posts' target='new'>Tentang Admin</a></li> 
   <li><a class='trigger'>Menu</a> 
    <ul> 
     <li><a href='Link Tujuan' target='new'>Sub menu</a></li><li class='hr'/> 
     <li><a href='Link Tujuan' target='new'>Sub menu</a></li><li class='hr'/>
     <li><a href='Link Tujuan' target='new'>Sub menu</a></li> 
    </ul> 
   </li> 
   <li><a href='Link Tujuan' target='new'>Sub menu</a></li> 
   <li><a class='trigger'>Menu</a> 
    <ul> 
     <li><a href='Link Tujuan' target='new'>Sub menu</a></li><li class='hr'/> 
     <li><a href='Link Tujuan' target='new'>Sub menu</a></li>
    </ul> 
   </li> 
   <li><a class='trigger'>Menu</a> 
    <ul> 
     <li><a href='Link Tujuan' target='new'>Sub menu</a></li><li class='hr'/>
     <li><a href='Link Tujuan' target='new'>Sub menu</a></li>
    </ul>
   </li> 
  </ul>
  <div class='menusearch'> 
   <div style='float:right;padding:8px 8px 0 0;'>
    <form action='http://www.AiRaLoKa.com/search' method='get' target=''> 
     <input name='sitesearch' style='display:none;' value='http://www.AiRaLoKa.com/'/> 
     <input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwvWTFCMZpZeABtUi_tpvdQehdEpIZ6FjWXZLP3NuwwN9QCGm3JRL9dgQd7VjEYVYexJxdkPL47sB87pTB108QCq-dw7Yfa3d5-jHlk1snWOdedjJQP3rc611GyO4CzK-rwz3DxUSLxQ/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/>
    <input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdPaAPDl8wH2oLE4hWFnnC-Mi7psnLpOf23PkXU7cCe8GY36twt083HiU9zytTiVesmzEtBeqrKsAqgsPeMoOKLhsMw1LaQanY3te4bXqOITd7Yjf0rY6uly9XKjGVz5n8vNbjvgT0yk/s1600/bg_search.gif' type='image' value='Search'/> 
    </form>
  </div>
 </div>
<br class='clearit'/>
</div><div style='clear:both;'/></div>

Kode yang berwarna merah bisa anda ganti dengan url submenu anda yang berwarna hijau. contoh: <li><a href='https://plus.google.com/u/0/103445143860797306291' target='new'>Tentang Admin</a></li> 
Kode yang berwarna ungu bisa anda ganti dengan url blog anda. contoh: 'http://www.AiRaLoKa.com/'
 
5. Pratinjau / preview terlebih dahulu. Kalau sudah sesuai dengan keinginan anda, simpan template.

Selamat Mencoba!