cara membuat menu navigasi horisontal/dropdown (massive blue drop down)

Salam para blogger mania.

Pada ulasan kali ini saya akan memberikan tips bagaimana cara membuat menu navigasi horizontal/dropdown untuk mempercantik blog anda. Menu navigasi horisontal dengan script css yang bisa dijadikan alternatif untuk dipasang di blog adalah menu navigasi horisontal/dropdown (massive blue drop down). Seperti gambar di bawah ini:

Beberapa menu horizontal lainnya bisa dilihat disini:
1. Menu Horizontal sederhana
2. Dropdown 2 level


Untuk membuat menu navigasi di atas, bisa ikuti prosedur berikut:



1. Login ke akun blogger
Pilih Dashboard - Tata letak (Rancangan) - Edit HTML

menu horisontalcari kode berikut:

cari kode berikut:

]]></b:skin>

2. Di bagian atas kode tersebut masukkan kode berikut

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;
}

Menu navigasi di atas sangat sederhana dengan background warna hitam dan saat disorot mouse akan berwarna biru. Namun, anda juga bisa mengubah warnanya dengan memasukkan kode warna disini

dan anda ganti dengan kode yang berwarna merah diatas. Bisa anda coba ganti sesuai dengan keinginan anda. tapi jangan lupa untuk mengcopy dulu script yang sy berikan diatas ke notepad dan baru dipastekan ke HTML blog anda.

3. Simpan template
4. Kemudian klik page element, dan tambah gadget/ add gadget.

4. Pada gadget html/javascript, masukkan kode berikut:

<div class="menu">
<ul>
<li><a href="http://download-anime.web.id"> Home</a></li>
<li><a href="http://download-anime.web.id/p/all-anime.html">Anime</a>
<ul>
<li><a href="http://download-anime.web.id/p/completed-anime.html">Completed Anime</a></li>
<li><a href="http://download-anime.web.id/p/on-going-anime.html">On going Anime</a></li>
<li><a href="http://download-anime.web.id/p/ovaspecial-anime.html">Ova/Special Anime</a></li>
<li><a href="http://download-anime.web.id/p/anime-movies.html">Anime Movies</a></li>
</ul>
</li>
<li><a href="http://download-anime.web.id/p/sitemap.html">Sitemap</a></li>
<li><a href="http://download-anime.web.id/p/link-exchange.html">Link Exchange</a></li>

<li><a href="http://download-anime.web.id/p/faqs.html">F.A.Qs</a></li>
</ul>
</div>

Gimana?? mudah bukan?? selamat mencoba ya sobaat. klo ada yang ingin ditanyakan, silahkan lewat kotak komen dibwah.. Dan jika tidak keberatan untuk membantu blog ini, silahkan bantu blog ini dengan memberikan komentar anda melalui kotak komen. terima kasih. have a nice blogging.:)