Cara Membuat Menu Dropdown

Assalamualaikum..Hallo shabat dafa mempunyai menu dropdown dibawah header memang membuat blog kita terlihat keren dan propesional. Maka menu dropdown terasa sangat penting,maka dari itu kali ini aku mau posting tentang bagaimana cara membuat menu dropdown pada blog kita..Caranya

1. Masuk ke akun blogger-> klik Template -> Edit HTML 
2. Lalu cari kode ]]></b:skin> ( gunakan Ctrl + F untuk ) 
3. Terus paste script di bawah ini tepat diatas kode ]]></b:skin> 

#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ_Cl2nWD6Kk6f_Yy7GAyrRfcmyGPpT5cNIJmODx4JOAAvGLqH4moB3qYXIB0va-OdnIF-p2cDjMr7o4I0iEkruGp4_S9p1IXg1EIXejhWi5jFhjYg0q98GlLDEI36_ox6qH-ZQZR4W1cm/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/AVvXsEgeN9VtkGCGFuNT7w3_vhmwGcHysLVZeIVWx4M8m_0rJTznATO1KTKmcwe_22HWUwB0TiCE8TST8j1DMW3zM5wyiyRskrVS9LlhRD98bt3y0agV74dOCAXFH-PxzIOqVZ5vvAJnj_ZSLA8K/) 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/AVvXsEiPA5rnOEx0BFk_836OPyg6IGGeR6Qbw85keeUJVceBhWIdIWBZhvYM-MEcQxlkqqinmk9KnKYXFs65nZGoYQSqk6mjloZu_zlGI5H1hduBXMoAB0hYzLxrk84ohDmshcbQZITe956HV8pM/) 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/AVvXsEiPA5rnOEx0BFk_836OPyg6IGGeR6Qbw85keeUJVceBhWIdIWBZhvYM-MEcQxlkqqinmk9KnKYXFs65nZGoYQSqk6mjloZu_zlGI5H1hduBXMoAB0hYzLxrk84ohDmshcbQZITe956HV8pM/) 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. Kemudian cari kode <div id='content-wrapper'>
5. Copy kode dibawah ini dan paste tepat dibawah kode <div id='content-wrapper'>
<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li><a href='Link Blog Kamu'>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. Klik Pratinjau/Preview dulu sebelum di SAVE template nya, jika sudah berhasil maka klik Save/Simpan.

Jika kode <div id='content-wrapper'> tidak ada dalam template kamu, itu berarti cara ini tidak sesuai dengan template yang sedang agan gunakan. Tetapi kamu masih bisa memasangnya dengan cara :

1. Masuk tataletak 
2. Tambah Gadget 
3. pilih HTML/JavaScript >> taruh kode script yang ke-2 di dalam nya. Klik Simpan dan lihat hasilnya. 

selamat mencoba sobat dan blog kamu akan terlihat lebih bagus

Semoga bermanfaat..!!!