Menu Navigasi Drop Down atau menu bercabang kebawah sering kita jumpai di blogspot. Menu navigasi horizontal dengan sub menu dibawahnya tersebut biasanya terletak di bawah header blog dan mempunyai tampilan yang menarik. Anda pasti tidak asing lagi melihat menu navigasi dropdown tersebut, namun pada blog anda belum memasang navigasi menu bercabang, silahkan simak bagaimana
cara membuat menu navigasi horizontal dorpdown
Cara Membuat Menu Navigasi Drop Down di Blogg
1. Login ke blogger.com
2. Pada dasboard, pilih template
3. Pilih Edit HTML
4. Backup template dulu
5. Tekan ctrl+f, cari kode ]]></b:skin>
lalu letakkan kode berikut diatasnya
// navigasi menu //
menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:none;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:purple;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background:green;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:#008080;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:green;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
5.SetelahItu Letakan kode dibawah ini diatas </header> Atau yang lainya
<div class="menu">
<ul>
<li>
<a href="#"><b>HOME<b></b></b></a>
</li>
<li>
<a href="#"><b>PRODUCT</b></a>
<ul>
<li><a href="http://kontraktorsolarcell.blogspot.com/p/product/module-solar-cell.html">Module Solar Cell</a></li>
<li><a href="#">Solar Street Light (PJU)</a></li>
<li><a href="#">Solar Water Pumps</a></li>
<li><a href="#">Inverter</a></li>
<li><a href="#">Kontroller</a></li>
<li><a href="#">Digital Battery Charge</a></li>
</ul>
</li>
<li><a href="#"><b>ABOUT PRODUCT</b></a>
<ul>
<li><a href="#">Module Solar Cell</a></li>
<li><a href="#">Solar Street Light (PJU)</a></li>
<li><a href="#">Solar Water Pumps</a></li>
<li><a href="#">Inverter</a></li>
<li><a href="#">Controller</a></li>
<li><a href="#">Digital Battery Charge</a></li>
</ul>
</li>
<li>
<a href="#"><b>SERVICES</b></a>
</li>
<li>
<a href="#"><b>PRODUCT</b></a>
<ul>
<li><a href="#">Module Solar Cell</a></li>
<li><a href="#">Solar Street Light (PJU)</a>
<ul>
<li><a href="#">Mercure</a></li>
<li><a href="#">LED</a></li>
</ul>
</li>
<li><a href="#">Solar Water Pumps</a></li>
<li><a href="#">Inverter</a></li>
<li><a href="#">Kontroller</a></li>
<li><a href="#">Digital Battery Charge</a></li>
</ul>
</li>
</ul>
</div>
Sekian cara membuat
Cara Membuat Menu Navigasi Drop Down
