Cara Membuat Menu Dropdown Blog

Cara Membuat Menu Dropdown Blog

Pernahkah terpikir oleh kamu untuk membuat menu dropdown , nah untuk itu bila kamu tertarik. Silakan ikuti perintah berikut ini.

1. Login ke dalam blogger anda.

2. Pilih Menu Template

3. Klik Tombol edit html. Kemudian centang Expand Widget Template

4. Cari code ]]></b:skin> atau klik CTRL+F untuk pencarian
Tempatkan dan copy code dibawah ini di atas code ]]></b:skin> :

#Mediablogger {
background: code warna1;
width: 880px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: codewarna2;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#mediabloggerbox {
width: 875px;
float: left;
margin: 0;
padding: 0;
}
#punch {
margin: 0;
padding: 0;
}
#punch ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#punch li {
list-style: none;
margin: 0;
padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
color: codewarna2;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#punch li a:hover, #punch li a:active {
background: codewarna2;
color: codewarna1;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
background: codewarna1;
width: 150px;
color: codewarna2;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
background: codewarna2;
color: codewarna1;
padding: 7px 10px;
}
#punch li {
float: left;
padding: 0;
}
#punch li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#punch li ul a {
width: 140px;
}
#punch li ul ul {
margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
left: auto;
}
#punch li:hover, #punch li.sfhover {
position: static;
}

Gantilah code warna 1 dan code warna 2 sesuai keinginan atau pakailah warna dibawah ini

Menu Hitam
codewarna1 = #555555
codewarna2 = #FFFFFF

Menu Hijau
codewarna1 = #38761d
codewarna2 = #FFFFFF

Menu Biru
codewarna1 = #66bbdd
codewarna2 = #004661

Menu Biru
codewarna1 = #66bbdd
codewarna2 = #004661

Setelah itu klik save template. Lalu klik tata letak atau layout pilih tambah gadget, cari javascript/html dan copykan code ini :

<div id="Kebinekaan">
<div id="mediabloggerbox">
<ul id="punch">
<li><a href="http://kebinekaan.blogspot.com">Home</a></li>
<li>
<a href="#">Sample Page</a>
<ul>
<li>
<a href="#">Sub Page #1</a>
<ul>
<li><a href="#">Sub Sub Page #1</a></li>
<li><a href="#">Sub Sub Page #2</a></li>
<li><a href="#">Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<li><a href="#">Sample Post</a></li>
<li><a href="#">Blog Page</a></li>
</ul>
</div>
</div>