Membuat menu navigasi (horizontal)

Contoh menu navigasi horizontal bercabang tersebut bisa anda lihat di bawah ini:

Menu horizontal di atas dibuat dengan menggunakan html script dan css, menurut beberapa sumber menu horisontal yang dibuat menggunakan script css + html  lebih mudah ditelusuri oleh robot search engine [ex.google] dibanding jika menggunakan menu yang dibuat menggunakan javascript.

Untuk membuatnya anda bisa melakukan langkah berikut:

1. Login ke account blogger anda, Template -> Edit HTML cari kode berikut: 

]]></b:skin> 

2. Di bagian atas kode tersebut masukkan kode berikut

/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 98);}
#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:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#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:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
.status-msg-wrap{
display:none;
}

4. Klik tombol "Simpan Template"

5. Buka halaman "Tata Letak "

6. Pada Elemen header , klik " Tambah Gadget"

7. setelah mengklik tombol "tambah gadget" pilih HTML/Javascript

8. pada kotak dialog html/javascrpit masukkan kode html berikut:

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

catatan:

Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda atau alamat blog anda sendiri. 

Teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.

Tidak semua tema mendukung perubahan ini, sebagian tema pada header tidak bisa di tambah gadget HTML/JavaScript

9. Simpan perubahan yang anda buat.

Setelah semua sudah anda lakukan dengan benar, lihat perubahan pada blog anda...