Cara Membuat Navigasi Menu

Menu navigasi berfungsi untuk meletakkan link ke salah satu postingan anda atau ke situs/blog lain. Screenshootnya seperti gambar diatas.

Menu navigasi ini bisa diletakkan di bawah header. Nah, tertarik untuk membuatnya? Ikuti langkah-langkah berikut.

Pertama-tama login ke Blogger, lalu klik Tata Letak lalu masuk ke submenu Edit HTML. Nah, buat backup dulu ya...

Kalau sudah buat backupnya, sekarang lakukan langkah-langkah berikut.

1. Cari kode berikut.

]]></b:skin>

2. Taruh kode berikut diatasnya.

/*--Navigasi Menu--*/
#navmenu {
height:auto;
margin:0;
width:580; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:black; /* 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:yellow; /* 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:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:black; /* Warna teks saat kursor mouse berada di atasnya */
}

3. Lalu cari kode yang mirip kode berikut ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='C A Minor D Minor ke G ke C Lagi (Header)' type='Header'/>
</b:section>
</div>

4. Letakkan kode berikut dibawahnya.

<div id="navmenu">
<ul id="navmenu">
<li><a href="http://muhammadrizkifadillah.blogspot.com">Home</a></li>
<li><a href="http://allaboutmusicishere.blogspot.com">Info Musik</a></li>
<li><a href="http://beritaduniamaya.blogspot.com">Berita Dunia Maya</a></li>
<li><a href="http://siapayangpantas.blogspot.com">Belajar SEO</a></li>
</ul>
</div>

Tulisan http://muhammadrizkifadillah.blogspot.com adalah link menuju posting/blog/situs lain. Sedangkan tulisan Home adalah teks yang akan ditampilkan.

5. Lalu klik Simpan Template.

6. Liat blog anda. Berhasil? Kalau berhasil, selamat! Kalau gagal, coba lagi. Kalau bingung, ya komen dong dibawah... gak usah malu-malu.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya