Cara Mudah Membuat Menu Drop Down di Blog

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/AVvXsEhv6g24ANup73tyrp9OQ27v6Bf3PNrGuHWRmlffjNcSFp_xyFeq5ZvECPncFCiPTXYpoUd9trrIttqSFm3zdt2_X1mRKBQgXMqebqHHyh9FTSw_ypIGtZRAfJ6A4tkktaMZBs5NsGxqc74/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//zamedaku.blogspot.com'>Home</a></li>
<li><a href='http//zamedaku.blogspot.com'>profil</a></li>
<li><a href='http//zamedaku.blogspot.com'>Blogging</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun &#187;</a>
<ul>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 1</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 2</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 3</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 4</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 5</a></li>
</ul></li>
<li><a href='http//zamedaku.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....