Cara Memasang Menu Navigasi Horizontal Di Bawah Header Dengan Mudah

Cara Memasang Menu Navigasi Horizontal Di Bawah Header Dengan Mudah - Menu Navigasi dapat memudahkan pengunjung untuk mencari artikel dengan label tertentu, selain itu ini juga menambah kerapihan blog anda

Lansung saja langkah pemasangannya. :

1. Login dahulu ke akun blogger agan
2. Cari Template,
3. Klik Edit HTML"
4. Copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-background-1.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
padding:0 0 0 16px; /*Jangan Dirubah kode Jarak ini*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 20px 0 8px;
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-kiri.gif) no-repeat;
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-kanan.gif) no-repeat right top;
}

5. Lalu Copy code dibawah ini dan letakkan diatas kode <div id='content-wrapper'>

 <ul class='glossymenu'>
<li class='current'><a href='URL BLOG KAMU'><b>Home</b></a></li>
<li><a href='URL-Link-Tujuan1'><b>Judul-Tujuan1</b></a></li>
<li><a href='URL-Link-Tujuan2'><b>Judul-Tujuan2</b></a></li>
<li><a href='URL-Link-Tujuan3'><b>Judul-Tujuan3</b></a></li>
<li><a href='URL-Link-Tujuan4'><b>Judul-Tujuan4</b></a></li>
<li><a href='URL-Link-Tujuan5'><b>Judul-Tujuan5</b></a></li>
</ul>

Pada teks yang berwarna merah masukkan URL tujuan yang anda ingin jadikan Menu Navigasi pada Bawah header, dan teks yang berwarna biru  masukkan judul dari URL yang elah anda masukkan untuk menu navigasi dibawah header.

Dan seterusnya.....
gimana biar warna menu sesuai dengan yang kita inginkan? Gampang banget, kalian hanya perlu mengganti kode berwarna hijau dengan kode-kode dibawah ini sesuai dengan. Jangan sampai salah meletakan ya, sesuaikan dengan kode masing-masing.

Warna Abu-abu
- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-background-1-abu.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kiridiaryosicopy.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kanan-abu.gif


Warna Ungu
- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-background-1ungu.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kiri-ungu.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kanan-ungu.gif



Warna Merah
- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-background-1merah.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kiri-merah.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kanan-merah.gif



Warna Hijau
- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-background-1hijau.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kiri-hijau.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kanan-hijau.gif


Warna Biru
- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-background-1biru.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kiri-biru.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kanan-biru.gif

Terakhir simpan dan lihat hasilnya,
Baca juga cara mengoptimalkan blog untuk meningkatkan SEO