Cara Membuat Navigasi Menu

Awas ada Rizki... Prikitiw... Assalamualaikum. Kembali lagi bersama saya, seperti binasa biasa, kita akan membahas tentang Modifikasi Template. Oh, iya. Untuk melihat semua posting yang dibuat oleh saya, klik aja DISINI. Ok, kita langsung saja beralih ke topik.

Navigasi adalah sebuah tool yang berguna untuk membantu pengunjung menjelajahi isi situs web. Nah, navigasi yang kali ini akan kita buat TIDAK menggunakan gambar. Hanya sekedar teknik CSS biasa sehingga tidak terlalu memberatkan loading blog. Contohnya seperti gambar dibawah.

Nah, tertarik nggak membuatnya? Kalau iya, lakukan langkah-langkah berikut.

1. Login dulu ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Silakan backup dulu template anda.

3. Cari kode:

]]></b:skin>

4. Tepat diatasnya, ketikkan kode:

/* Navigasi Menu */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:#81F781; /* Warna latar belakang menu navigasi */
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover {
background:#088A08; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

5. Lalu cari kode yang mirip/mendekati:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
</b:section>
</div>

6. Lalu dibawahnya, ketikkan kode:

<div id='navmenu'>
<ul id='navmenu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Baik Baik Sayang</a></li>
<li><a href='#'>Buka Hatimu</a></li>
<li><a href='#'>Sang Mantan</a></li>
<li><a href='#'>Separuh Jiwaku Pergi</a></li>
<li><a href='#'>Rasa Ini</a></li>
</ul>
</div>

Ket: Ganti teks dan link diatas dengan teks dan link yang diinginkan. Anda bisa menambah ataupun mengurangi jumlah teks dan link dari menu tersebut.

7. Kalau masih ragu-ragu, sebaiknya pratinjau dulu. Klik Pratinjau

8. Kalau sudah yakin, simpan template anda. Klik Simpan Template.

Selamat mencoba. Semoga artikel ini bermanfaat.