Cara Memasang Menu Navigasi keren pada Blog

Cara Memasang Menu Navigasi keren 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:

Cara Membuat Menu Navigasi Pada Blog

1. Login ke blog Anda

2. Pilih template > click edit template.

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

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

#menunavigasi {float:left; background:#252525; width:auto; margin:0 auto; padding:0 auto;border-radius: 10px}
#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 Kode Warna HTML

5. Kemudian cari kode <div id='content-wrapper'> atau <div id='outer-wrapper'> yang jelasnya kode ini letaknya tidak jauh di bawah kode <body>

Catatan : Jika kode di atas tidak di temukan, itu karena setiap pengkodean CSS untuk template berbeda-beda tapi fungsinya sama, jadi carilah kode yang tidak jauh beda dengan nama di atas.

6. Copy-paste code berikut ini tepat dibawahnya :

<div id='menunavigasi'>
<ul id='menubar'>
<li><a href='http://www.tugasku4u.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 Trick</a></li>
<li><a href='#'>Info SEO</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='clear'/>

Keterangan:

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

- Ganti tulisan warna biru dengan nama alamat link yang dimasukkan tadi.

Contoh :
Alamat link URL : misal = atmimlananuronaula44.blogspot.com

Nama alamat link : misal = Tutorial Blogger

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