Cara Mudah Membuat Menu Drop Down di Blog

Hmm.. sebelumnya sudah tau menu drop down belum? yang belum tau silakan lihat paling atas dari blog ini yang berjejer ada tulisan home, tips tricks blog, info sehat, dan lain-lain. Dan sekarang arahkan kursor anda ke tab menu tips tricks blog dan nanti pasti akan muncul seperti daftar yang turun kebawah. Nah itu yang namanya menu dropdown. Tapi jauh sebelumnya saya juga pernah share tentang cara membuat tab menu biasa (yang dulu ini tanpa menu dropdown dan biasaya lebih digunakan untuk newbie). Tapi apa salahnya mencoba cara membuat menu dropdown ini agar blog sobat terlihat lebih professional.

screenshot menu dropdown

Oia, cara ini aku dapat dari wartaberata.com. Dan cara ini menurutku cara yang paling mudah dari beberapa artikel lain yang pernah saya lihat. Saya sungguh berterimakasih akhirnya bisa memasang menu dropdown ini berkat tutorial dari kang wartabeta. Ok begini caranya..

Sebelumnya backup template duyu..

1. Login ke blogger (yang diperbarui bahasa Indonesia)

2. Masuk ke template - edit html -  centang pada expand template widget

3. Cari kode ini ]]></b:skin> (gunakan ctrl+F untuk search) lalu tepat diatasnya letakkan kode ini

#NavbarMenu {background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC85Rz0qflRDr4B0G89tRclwdaPHyOFeizl6Hy3MFVkC5hJfZxtmZqqveruNwmhBR7TJT-0sjT4qhtkfwLLF1hi2ai3EHyzjq9pFo-LARf1VIztZGdN3Nsq37Uo8SFntQFmUbcUBYTc8w/s400/navbar11.png);width: 960px;height: 35px;font-size: 12px;font-family: arial, Verdana;color: #FFF;font-weight: bold;margin: 0;padding: 0;}#NavbarMenuleft {width: 710px;float: left;margin: 0;padding: 0;}#nav {margin: 0;padding: 0;}#nav ul {float: left;list-style: none;margin: 0;padding: 0;}#nav li {list-style: none;margin: 0;padding: 0;}#nav li a, #nav li a:link, #nav li a:visited {color: #FFF;display: block;font-size: 14px;font-weight:bold;font-family: sans-serif, Verdana;font-weight: bold;text-transform: none;margin: 0;padding: 9px 15px 8px;}#nav li a:hover, #nav li a:active {background: #555;color: #FFF;margin: 0;padding: 9px 15px 8px;text-decoration: none;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a, #nav li li a:link, #nav li li a:visited {background: #555;width: 200px;color: #FFF;font-size: 14px;font-family: "ms sans serif", Verdana;font-weight: normal;text-transform: none;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px dotted #7F7F7F;border-left: 1px solid #7F7F7F;border-right: 1px solid #7F7F7F;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a:hover, #nav li li a:active {background: #777;color: #FFF;padding: 7px 10px;}#nav li {float: left;padding: 0;}#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;}#nav li ul a {width: 140px;}#nav li ul ul {margin: -32px 0 0 171px;}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}#nav li:hover, #nav li.sfhover {position: static;}

4. Selanjutnya cari kode ini  <div id='header-wrapper'> lalu tepat dibawahnya pastekan kode ini

contoh menu drop down untuk kode dibawah

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://putragerald.blogspot.com/'>Home</a></li>
<li><a href='http://putragerald.blogspot.com/'>profil</a></li>
<li><a href='http://putragerald.blogspot.com/'>Blogging</a></li>
<li><a href='http://putragerald.blogspot.com/'>Menu turun &#187;</a>
<ul>
<li><a href='http://putragerald.blogspot.com//'>Menu turun 1</a></li>
<li><a href='http://putragerald.blogspot.com/'>Menu turun 2</a></li>
<li><a href='http://putragerald.blogspot.com/'>Menu turun 3</a></li>
<li><a href='http://putragerald.blogspot.com/'>Menu turun 4</a></li>
<li><a href='http://putragerald.blogspot.com/'>Menu turun 5</a></li>
</ul></li>
<li><a href='http://putragerald.blogspot.com/'>Contact us</a></li>
</ul>
</div>
</div>

Untuk link warna merah rubahlah dengan link anda, untuk warna oranye rubahlah untuk nama menu-menunya.

5. Simpan. Dan lihat hasilnya....

Jika ada yang ingin ditanyakan silakan tanya lewat komentar. Jika berhasil komen juga yaa