Memasang Menu Horizontal di Blog

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:

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.

Cara Membuat Menu Navigasi Pada Blog

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
Warna di atas bisa Anda ganti sesuai warna kesukaan Anda. Untuk melihat kode-kode warnanya silahkan lihat Daftar Kode Warna

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://darulabrror.blogspot.com/'>Homepage</a></li>
<li><a href='#'>Kumpulan Tugas</a></li>
<li><a href='#'>Kumpulan Makalah</a></li>
<li><a href='#'>Tutorial Blogger</a></li>
<li><a href='#'>Tips Dan Trick</a></li>
<li><a href='#'>Bantuan Donasi</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 dimasukkan tadi.

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

 Sekian selamat mencoba.........