Cara Membuat Menu Navigasi di Bawah Header Blog

Ini dia trik yang sering dicari-cari sobat blogger (Heuheu…sok tau!). bagi sobat yang ingin memiliki Menu navigasi dibawah header, gak salah lagi disinilah tempatnya he...3x.Dari pada diam saja, saya akan mencoba berbagi ilmu yang aku dapatkan dari teman blogger juga, Penasaran..??? Ok langsung aja kita ikuti langkah demi langkah demi tercapainya tujuan yang mulia kita, heu….

1. Login dahulu ke account blogspot sobat.
2. Klik "Page Element" & Klik "Edit HTML"
3. Centangkan "Expand Widget Templates"
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 di bawah ini dan letakkan tepat di atas 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 Kuning sobat isi url tujuan yang diinginkan.

Pada teks yang berwarna biru sobat isi dengan judul sesuai dari tujuan dari link tersebut.

Contoh :

<li><a href='http://budak-maja.blogspot.com'><b>TutoriaL Blog</b></a></li>

Dan seterusnya……

Nah, kalo ada pertanyaan, gimana biar warna menu sesuai dengan yang kita inginkan? Gampang banget sobat, kalian hanya perlu mengganti kode berwarna hijau dengan kode-kode di bawah ini sesuai dengan selera sobat. Jangan salah taruh 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


Setelah selesai, tinggal klik simpan dan lihat hasilnya....
Semoga bermanfaat.