Cara Membuat Menu Navigasi Horizontal Pada Blog

Menu navigasi horizontal biasa digunakan pada situs web atau blog. Dilihat dari peranannya menu horizontal sangat berguna bagi pemilik blog maupun pengunjung guna menavigasi ke halaman yang diinginkan.

Memasang menu navigasi ini biasa diletakkan di bawah maupun di atas header. Anda bisa memasukkan link secara horizontal atau berderet kesamping. Biasanya link yang diletakkan pada menu horizontal ini adalah menu yang dianggap penting, karena pengunjung blog ketika pertama kali membuka halaman secara tidak langsung akan melihat menu ini.

Menu ini sangat mudah diaplikasikan pada template blog, karena cara membuat menu navigasi horizontal ini menggunakan css biasa yang tidak akan membebani loading blog Anda. Menu horizontal yang akan kita buat adalah menu navigasi seperti yang ada pada blog ini, atau Anda bisa lihat contoh gambarnya di bawah ini:

Langsung saja saya akan ajarkan langkah-langkahnya :

1. Login ke blog Anda

2. Pilih Template > Click Edit Template.

3. Cari kode ]]></b:skin>

4. Copy-paste code CSS berikut ini tepat diatasnya :

#menunavigasi {float:left; background:#252525; width:auto; margin:0 auto; padding:0 auto;-moz-border-radius: 10px; border-radius:4px}
#menubar {width:100%}
#menubar,#menubar ul {list-style:none; margin:0; padding-left:10px}
#menubar a {display:block; text-decoration:none; font-size:12px; font-weight:Bold; color:#eee; border-right:1px solid #666; padding:8px 12px}
#menubar li {float:left; width:auto}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a {color:#fff}

Keterangan :
#252525 : Warna background menu navigasi
#eee : Warna font atau tulisan menu navigasi
#666 : Warna border samping kanan tulisan
#fff : Warna font atau tulisan saat di sorot kursor

Kode warna diatas bisa sobat ganti sesuai keinginan sobat.

5. Kemudian cari kode <div id='content-wrapper'>

6. Copy-paste code berikut ini tepat dibawahnya :

<div id='menunavigasi'>
<ul id='menubar'>
<li><a href='http://brainword21.blogspot.com'>Home</a></li>
<li><a href='#'>CorelDRAW</a></li>
<li><a href='#'>Harvest Moon</a></li>
<li><a href='#'>Tutorial Blogger</a></li>
<li><a href='#'>Tips Dan Trick</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='clear'/>

Keterangan:

- Ganti tulisan warna merah dengan alamat link milik Anda yang ingin dimasukkan dalam menu.

- Ganti tulisan warna biru dengan nama alamat link yang anda inginkan.

7. Pratinjau, jika tidak ada kesalahan silahkan simpan template Anda.

Sekian tutorial cara membuat menu navigasi pada blog. Semoga bermanfaat. Jangan lupa tinggalkan komentarmu dan join this site ya :)  Salam brainword21