Cara Membuat Navigasi Menu Dibawah Header

Pada postingan yang ke 40 ini saya ingin memberikan tutorial membuat menu navigasi dibawah header, yang seteh sebelumnya saya sudah share tutorial cara pasang tombol share diblog.

Navigasi menu yang akan kita buat ini tergolong simple. Oke langsung sajalah lihat dan ikuti langkah-langkah dibawah ini untuk membuatnya :

Contoh

• Seperti biasa masuk dulu ke blogger, kemudian masuk dashboard > template > Edit HTML.
• Kemudian tekan ctrl+f pada keyboard dan cari mencari kode ]]></b:skin> dan letakan kode dibawah ini diatas kode ]]></b:skin> tadi :
  
  

  /* Navigasi */#menu {
  background:#333;
  font:bold 16px Calibri, Arial,Sans-Serif;
  width:970px;
  margin:0;
  padding:0;
  overflow:hidden;
  border-top:1px solid #436eaa;
  border-bottom:1px solid #1d3a63;
  }
  #menu li {
  display:inline;
  float:left;
  margin:0;
  }
  #menu li a {
  display:block;
  padding:6px 10px;
  color:#f5f5f5;
  text-shadow:-1px -1px #1d3a63;
  }
  #menu li a:hover {
  background:#1d3a63;
  color:#ddd;
  }

• Selanjutna cari lagi kode <div id='header-wrapper'> dan letakan kode di bawah ini tepat di atasnya :
  
  

  <nav>
  <ul id='menu'>
  <li><a href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#'>Menu 1</a></li>
  <li><a href='#'>Menu 2</a></li>
  <li><a href='#'>Menu 3</a></li>
  <li><a href='#'>Menu 4</a></li>
  </ul>
  </nav>

• Terakhir cara yang super duper mudah klik save template.

keterangan: panjang lebarnya sesuaikan dengan template anda dengan mengganti kode width=970px , cara menganti warnanya pasti kalian sudah tahu. Pada kode tagnya ganti tanda '#' dengan url label anda dan ganti juga tulisan menu 1 dan seterusnya dengan judul label anda.

Oke sekian mudah-mudahan dapat membantu, bila ada yang ingin ditanyakan silahkan berkomentar dan terima kasih.