Cara Membuat Menu Navigasi Horizontal Dropdown

Cara Membuat Menu Navigasi Horizontal Dropdown Pada Blog. Hay sobat, kali ini madhi akan share cara membuat menu horizontal di bawah header. Sebelumnya juga sudah di share cara membuat menu navigasi horizontal sunrise, dan kali ini kita akan membahas membuat menu horizontal dengan mudah. Bagai mana cara membuat menu navigasi horizontal ini? untuk lebih jelasnya silakan sobat simak Langka-langkah membuat menu navigasi horizontal dibawah ini:

1. Masuk akun Blogger/Blogspot sobat
2. Masuk Dasboard => Tataletak (Rancangan) => Pilih Edit HTML
3. Cari kode ]]></b:skin>

4. Copy kode di bawah dan patekan tepat di atas kode ]]></b:skin>

menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;

}
.menu ul{
background:#333333;
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:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
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: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
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:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
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:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

5. Save Template

6. Masuk ke Tataletak (Rancangan) => Tambah Widget => pilih HTML Java Script

7 Copas (copy paste) code di bawah ini ke dalam widget tersebut

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tips Trick</a>
<ul>
<li><a href="#">Contac</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Microsoft Excel</a></li>
<li><a href="#">Microsoft Word</a></li>
<li><a href="#">Data recovery</a></li>
<li><a href="#">Antivirus</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Blog Tips</a></li>
<li><a href="#">SEO Tips</a></li>
<li><a href="#">Adsense</a></li>
<li><a href="#">Feed</a></li>
</ul>
</li>
<li><a href="#">Phone Tips</a>
<ul>
<li><a href="#">Phone Secret Codes</a></li>
<li><a href="#">Phone Screenshot</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Artikel Komputer</a></li>
<li><a href="#">Panduan SEO</a></li>
</ul>
</li>

<li><a href="madhi.web.id">Madhi Tutorial</a></li> 
<li><a href="#">Free Translator</a></li>
<li><a href="#">Link Exchange</a></li>
</ul>
</div>

8. Save widget dan lihat hasilnya

Penting:  Ganti tanda # pada href="#" dengan url tujuan sobat.
Ganti Home, Tips Trick, dan sebagainya dengan teks yang akan ditampilkan di menu navigasi blog 


Nah itulah tutorial seputar Cara Membuat Menu Navigasi Horisontal Dropdown, Cara Membuat Menu Navigasi Horisontal, Membuat Menu Navigasi Horisontal. Semoga bermanfaat dan jangan lupa setelah membaca artikel di atas di like ya :D