Cara Menambahkan Navigation Menu di Blogger

Navigation menu atau horizontal menu adalah suatu menu yang berisi navigasi untuk memudahkan pembaca menuju halaman yang direkomendasikan oleh penulis blog dan disusun secara horizontal. Letak horizontal menu biasanya dibawah header, sedangkan vertical menu letaknya biasanya di sidebar (karena tersusun secara vertikal). Selain kedua jenis tersebut, ada juga yang dinamakan "Dropdown Menu". Dropdown menu bisa tersusun vertikal maupun horizontal, bedanya dengan horizontal dan vertical menu, kalau dropdown menu menampilkan submenu dari menu utama. Namun kali ini kita akan membahas tentang horizontal menu.

Horizontal menu/ navigation menu pada dasarnya menggunakan tag li dan ul . Kali ini gue ngeshare tentang cara menambahkan horizontal menu ke blogger. Caranya cukup mudah, hanya menambahkan kodenya ke blog (seperti menambahkan widget ke blog). Baiklah, kali ini saya menggunakan beberapa kode css pemercantik horizontal menu ini, seperti contohnya inset box shadow, custom font, dan border radius. Oke langsung lihat demonya dulu!

Demo

Cara Menambahkan Navigation Menu di Blogger 
1. Login ke akun blogger
2. Masuk ke dashboard > layout 
3. Klik add gadget pada kotak yang berada dibawah judul blog.
4. Pilih HTML/Javascript dan kosongkan judulnya
5. Tambahkan kode dibawah ini :

<style type="text/css">
ul#list-nav {
  list-style:none;
  margin:auto -30px;
  padding:15px 25px;
  width:100%;
 background:#333;
 font: 15px 'Lobster';
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
border-radius:5px;}
ul#list-nav li {display:inline}
ul#list-nav li a {
  color:#fff;
 background: #333;
 padding:5px 20px;
 margin:auto 0;
 text-decoration: none;
}

ul#list-nav li a:hover {
  background:#ff0066;
  color:#000;
 border-radius:5px;
}
ul#list-nav li a:active {
   -moz-box-shadow:    inset 0 0 10px #333;
   -webkit-box-shadow: inset 0 0 10px #333;
   box-shadow:         inset 0 0 10px #333;

}
</style>

<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>

6. Klik Save dan lihat hasilnya

*Keterangan : 
Untuk mengubah isi menunya, ganti # dengan link tujuan. Dan ganti tulisan Home dengan teks yang akan muncul di menunya. Begitupun dengan kode yang ada dibawahnya.

Sumber : http://blogofhanifa.blogspot.com/2012/09/cara-menambahkan-navigation-menu-di.html