Membuat Menu Navigasi di bawah Header Blog

As Khairi - Membuat Menu Navigasi di bawah Header sebenarnya sudah ada bawaan dari blogger sendiri berupa Page/Laman. Namun karena tampilannya yang sederhana, banyak para blogger yang tidak ingin menggunakannya. Kali ini saya akan coba share Cara Membuat Menu Navigasi di bawah Header Blog yang bisa sobat modifikasi sendiri sesuai keinginan.

Sobat bisa lihat hasilnya pada blog ini.

Menu Navigasi di bawah Header Blog

Tertarik untuk Mencoba?

Berikut caranya :

1. Login ke Akun Blogger Sobat.
2. Pilih Template
3. Pilih Cadangkan/Pulihkan untuk backup template jika terjadi  error
4. Klik Edit HTML
5. Pilih Format Template
6. Copy Kode dibawah ini, lalu Pastekan di atas ]]></b:skin> (Gunakan Ctrl+F untuk memudahkan pencarian)

Kode:

.menu{
width:100%; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVj2SGDUBCXwKxYZSlTlDkaucosF7TedpeWPnJqiz5VMCBHtw50MQlSxp_H0P98c5iQndjyNrX-AcfbxYrrryMnaYK0ppNI_Dsj1pU5AzzTPxwHsDoFzd3t4K0O7OMH47a8H4RGXxVDvc/s1600/menu2.jpg) no-repeat; overflow:hidden; margin:0 0; padding-left: 5px;
}
.menu ul{
float:left; padding:4px
}
.menu li{
display:inline; font-weight:700; float:center
}
.menu li a{
color:#fff; display:block; margin-right:0; margin-top:-10px; float:left; padding:2px 12px 2px
}
.menu li a:hover{
background:#000; color:#fff;text-decoration:none; -moz-border-radius:4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:0px 15px 0px 15px
}

     7. Ganti tulisan yang berwarna biru dengan link gambar sobat.
     8. Kemudian Copy Kode dibawah ini dan Pastekan diatas kode </header>

Kode:

<div class='menu'>
 <ul>
 <li><a href='#' rel='nofollow' title='Artikel'> Artikel </a></li>
 <li><a href='#' rel='nofollow' title='Tips&amp;Trik'> Tips&amp;Trik </a> </li>
 <li> <a href='#' rel='nofollow' title='Tutorial Blog'> Tutorial Blog </a> </li>
 <li> <a href='#' rel='nofollow' title='SEO'> SEO </a> </li>
 <li> <a href='#' rel='nofollow' title='Download'> Download </a> </li>
 <li> <a href='#' rel='nofollow' title='Nomor Cantik'> Nomor Cantik </a> </li>
 <li> <a href='#' rel='nofollow' title='Our Partner'> Our Partner </a> </li>
 <li> <a href='#' rel='nofollow' title='Iklan'> Iklan </a> </li>
 </ul>
 </div>

     9. Ganti tanda # dengan link menu sobat
   10. Ganti tulisan yang berwarna biru dengan judul menu sobat
   11. Klik Save dan lihat hasilnya

Selamat Mencoba Membuat Menu Navigasi di bawah Header Blog. Semoga bisa bermanfaat untuk sobat blogger semua.