Cara Membuat Menu Drop Down di Blogger

Menu drop down adalah menu horisontal yang terdapat di bawah header blog. Dan apabila mouse kita letakkan ke salah satu menu tersebut akan muncul sub menu yang susunannya ke bawah. yang tentunya menu yang berkaitan, seperti yang terdapat dalam blog Rileks Bloggerest ini.

Untuk cara membuatnya, saya akan jelaskan satu persatu, perhatikan baik-baik wokeh

1.  Cari kode berikut ]]></b:skin>
2.  Lalu letakkan kode berikut ini.

/* Dropdown Menu */
#navdropdownmenu{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAWdjjTxmxtkXqL-sAlRbCkwhCm03am9Y4eJic907Ym0XGM7JKwmw3qrEQLsIQyQSAUB2ZsLjYTVUJslZiM3aI_xkrljt8ns5zKCbuSOa5mgKnk2ymkbYruv3cylyhaUsc8Di3wQlD8N2J/s1600/nav.png) repeat-x top;width:960px;height:auto;margin:0;padding:0;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
#navdropdownmenu ul{float:left;list-style:none;margin:0;padding:0;}
#navdropdownmenu li{list-style:none;float:left;}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{color:#fff;font-weight:bold;
display:block;text-shadow: 0px 1px 1px #fff;padding:9px 10px 9px 10px;font-size: 12px;font-family: Verdana,Sans-Serif;text-decoration:none;}
#navdropdownmenu li a:hover{background:#000;color:#fff;}
#navdropdownmenu li ul{z-index:10;position:absolute;height:auto;width:200px;visibility:hidden;}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{float:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAWdjjTxmxtkXqL-sAlRbCkwhCm03am9Y4eJic907Ym0XGM7JKwmw3qrEQLsIQyQSAUB2ZsLjYTVUJslZiM3aI_xkrljt8ns5zKCbuSOa5mgKnk2ymkbYruv3cylyhaUsc8Di3wQlD8N2J/s1600/nav.png) repeat-x top;width:200px;border-width:1px;border-style:solid;border-color:#000;}
#navdropdownmenu li ul li a:hover{background:#000;color:#fff;}
#navdropdownmenu li:hover ul{left:auto;visibility:visible;}

Oya,. jika anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari navigasi menu tersebut.

3.  Cari kode yang mirip dengan kode dibawah.

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='It's a Hardlife' type='Header'/>

</b:section>

</div>

4.  Dibawahnya, ketikkan kode berikut.

<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
</ul>
</li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
<li><a href='#'>Menu 7</a></li>
</ul>
</div>

Gantilah tulisan # dengan url label blogspot yang anda inginkan, tentu juga nama label yang anda inginkan. Anda bisa menambah atau mengurangi jumlah kode tersebut.

5.  Klik Simpan Template.