Cara Membuat Menu Navigasi di Bawah Header Blog

Assalamu'alaikum…
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;
}


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 di inginkan.
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 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…
Wassalamu'alaikum…

16 Responses to "Cara Membuat Menu Navigasi di Bawah Header Blog"

  1. thanks buat tipsnya...kommen juga di blogku ya...

    ReplyDelete
  2. langsung ku coba bro.. makasih

    ReplyDelete
  3. Nice info agan, segera di coba dulu...!
    heheheheee...
    jgn lupa mmapir ya sob ;
    salam "Blogadexme".salam "Blogabuabu".thanks!

    ReplyDelete
  4. thank buat tipsnya dah tak praktein dan berhasil love deh kapan - kapan mampir ke blog aku ya mas litelwater.blogspot.com

    ReplyDelete
  5. @fajar ardiansahiya mas sama-sama, saya siap meluncur ....:-)

    ReplyDelete
  6. Terima kasih tutorialnya kang akbar, semoga sukses blognya dan update dgn tutorial terbaru...kunjungin balik ya..!

    ReplyDelete
  7. @Gudang Sharesiipp..makasih mas, mhon do'a n dukunganya ja...

    siap meluncur nih.....

    ReplyDelete
  8. [url=http://buyonlineaccutaneone.com/#udmgn]buy accutane[/url] - buy cheap accutane , http://buyonlineaccutaneone.com/#eyzuw cheap accutane online

    ReplyDelete
  9. infonya bagus gan, sukses terus
    http://apotekacemaxs.com/

    ReplyDelete
  10. Terimakasih agan infonya :)
    http://bit.ly/1G1rz36

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete