Cara Membuat Menu Navigasi Dibawah Header

Ini dia trik yang sering dicari-cari sobat blogger (Heuheu….sok tau!). Aku akan mencoba berbagi ilmu yang aku dapatkan dari teman blogger juga, dari pada aku pendam aja, iya kan?? 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;
}

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 di inginkan.
Pada teks yang berwarna biru sobat isi dengan judul sesuai dari tujuan dari link tersebut.
Contoh :

<li><a href='http://mdjiung.blogspot.com'><b>Mdjiung 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 dobawah ini sesuai dengan selera sobat. Jangan sampai 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…

Artikel Terkait: