Cara Membuat Menu Navigasi Horizontal

Bagi sobat Blogger, mungkin tidak asing lagi gambar di atas. Gambar di atas adalah merupakan barisan menu navigasi horizontal pada blog ini. Menu navigasi berikut merupakan menu navigasi bercabang. Jika sobat blogger ingin memasangnya pada blog anda, silahkan ikuti langkah berikut.



1. Login ke Blogger.com dengan Akun anda
2. Pada Dasbor anda, silahkan pilih Rancangan
3. Kemudian Pilih Edit HTML
4. Cai kode seperti ini ]]></b:skin>
5. Letakkan kode berikut tepat sebelum (Di atas) kode ]]></b:skin>

/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i40.tinypic.com/21bnh2e.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 50);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#330000; text-decoration:none; font:13px Verdana, Arial, Helvetica, sans-serif; background:url(http://i40.tinypic.com/21bnh2e.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#330000;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#330000;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:0px dotted #fff; background:LightSkyBlue; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#00CCFF;}
.status-msg-wrap{
display:none;
}

6. Kemudian Simpan Template.
7. Setelah itu silahkan pilih Elemen Laman
8. Pilih Tambah Gadget
9. Pilih HTML/JavaScript
10. Letakkan kode HTML di bawah ini

<div id="menu">
<ul>
<li><a class="active" href="/"> Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
</ul></li>
<li><a href="#">Menu 4</a></li>
<ul>
</ul>
</ul></div>

11. Silahkan Edit tulisan yang berwarna merah dan hijau di atas.
12. Silahkan pindahkan sodbar anda di atas header atau di bawah header.

Selesai. Semoga bermanfaat.