Cara Membuat Menu Navigasi Horizontal Diatas Header

Navigasi Horizontal - Tentunya sudah tidak asing lagi dengan istilah ini, bagi para blogger mania tentunya akan terus mencari-cari mana saja  yang terbaik, karena jenis dari menu ini pun sangat beragam. Dalam postingan kali ini saya akan membahas Menu Horizontal yang biasa dalam artian ringan dalam proses loading blognya. Seperti apakah Menu ini ? Mari kita praktek bersama-sama untuk membuatnya. Berikut langkah-langkahnya.

Langkah Pembuatan Menu Navigasi Horizontal

1. Masuk Blogger seperti yang kemarin
2. pilih Rancangan/Design
3. Pilih EditHTML Kemudian centang " Expand Templates Widget"
4. Cari kode  ]]></b:skin>  
5. Kemudian Copy Kode dibawah ini dan Letakan tepat di ATAS kode  ]]></b:skin>

/* top navbarblack
----------------------------------------------- */
#navbarblack {
height:27px;
background:#fff url(http://i36.tinypic.com/11t7ok1/BGS1.jpg)top repeat-x;
padding:5px;
}
#nav {
font-size:1.1em;
float:left;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
}
#nav li {
float:left;
background: url(http://i38.tinypic.com/2v0lb92/BGS1.jpg) right repeat-y;
padding: 0 10px;
}
#nav a, #nav a:visited {
display:block;
color: #eabe64;
padding-bottom:6px;
border-bottom:2px solid #eae8d1;
}
#nav a:hover, #nav a:active,
#nav li.current-cat a, #nav li.current-cat a:visited {
display:block;
padding-bottom:2px;
color: #0c00fd;
border-bottom:12px solid #ea3131;
}
.shift:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content:".";
}
.shift {
margin:0px auto;
display:inline-block
}
.shift {
display:block
}

6. Tarik nafas dalam-dalam terus cari kode  </head>   
7. Lalu Copy kode dibawah ini dan letakkan di bawah kode  </head>  

<div class="shift" id="navbarblack">

<ul class="shift" id="nav">

<li><a href='http:astro-note.blogspot.com'>Home</a></li>
<li><a href='http:astro-note.blogspot.com'>About Me</a></li>
<li><a href='http:astro-note.blogspot.com'>Tutorial Blogger</a></li>
<li><a href='http:astro-note.blogspot.com'>Download</a></li>
<li><a href='http:astro-note.blogspot.com'>Contact Us</a></li>
<li><a href='http:astro-note.blogspot.com'>Privacy Policy</a></li>

</ul>

</div>

8. S A V E

Keterangan :

Warna Merah : Ganti dengan URL anda
Warna Ungu : Adalah judul dari Url anda, Silahkan ganti sesuai karakter anda

Well Done mas bro.. Silahkan Refresh/reload halaman blog anda dan lihat hasilnya, Jika ingin menambahkan icon di depan atau dibelakang judul silahkan anda tambahkan kode <img src="URL gambar anda">  setelah kode URL anda, jadinya seperti ini 

<li><a href='http:astro-note.blogspot.com'><img src='http://i264.photobucket.com/albums/ii184/aandfx/36.png'/>Home</a></li>

    Selamat Mencoba Semoga berhasil dalam sekali praktek. Jika ada yang kurang jelas Silahkan tanyakan dimana kurang jelasnya.