Cara Membuat menu Drowdown (menu menurun) pada blogger

cara membuat menu dropdown pada blogger

Catatan Pendek Penulis |Kadang kita ketika sedang browsing melihat menu pada website/blog orang lain begitu indah dengan menu dropdown, dan karena kemarin saya ada pertanyaan mengenai cara membuat menu dropdown maka kali ini saya mencoba menuliskan langkahnya.
1. Login ke dashboard Blogger > Templates > Edit HTML
2. Cari kode ]]></b:skin>
3. Copy script dibawah ini tepat diatas kode ]]></b:skin>

#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOC0S5nIZnWUV1lSSVj8LBVnmgApfnzpbtkNeG2n6_9O6Pg4j6OehjAJItoSFeg3KULw0zfQYy_UxnGvf-O0TlK4RbAazUQ36foyELrhoOozz4kTMepKwQURTq0CjYS2zkD-Vrf9iTfxk_/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRngVGRdEYchO1mbTvT_Er9eV_iASnZbxmkGNU-bDC94sodFaFAJKYdqJ8KgPDfxgvMK7KSPJ16pzBCwmTnSW4iX3eYPI3YJBj-GVt1RDfmceozZKyK6CGA-AyhoyDZJitUSrFjADSbVWN/) repeat-x;
height:33px;
}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_r77hwPh78i0oo3RtYvyOUOyiqQkzpxNJkBKDfqEIMrGvASBfZ4XnamOgThjJwp9IERTuSnq-UfT1FqC6O2bctVhnLAjVXDgNxNW6f-de3y3U204rIwQj3CD0xxBIZMVQLkOFmdUrFLK/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_r77hwPh78i0oo3RtYvyOUOyiqQkzpxNJkBKDfqEIMrGvASBfZ4XnamOgThjJwp9IERTuSnq-UfT1FqC6O2bctVhnLAjVXDgNxNW6f-de3y3U204rIwQj3CD0xxBIZMVQLkOFmdUrFLK/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

#catmenu li ul a {
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -34px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

4. Setelah itu cari lagi kode <div id='content-wrapper'>
5. Simpan kode dibawah ini tepat dibawahnya

<div id='catmenucontainer'>
<div id='catmenu'>

<ul>
<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
</ul>



</div>
</div>

<div class='clear'/>

6. Simpan dan lihat hasilnya.
Catatan :
NAMA LINK BLOG ANDA : isi dengan alamat URL website / blog anda
Your-Link-Here, Link-Title, dan Link-Name : isi dengan Link yang anda inginkan
Jika kode <div id='content-wrapper'> tidak ada di dalam templates anda, mungkin templates anda tidak cocok dengan langkah diatas. Tapi jangan khawatir karena masih ada langkah 2 yaitu dengan cara kode yang ke 2 di sisipkan sebagai widget pada setingan tata letak blog anda. caranya adalah Disini
Demikian cara membuat menu dropdown pada blog yang bisa saya informasikan.

Selamat mencoba.