Home » » Cara Membuat Menu Navigasi di Bawah Header Blog

Cara Membuat Menu Navigasi di Bawah Header Blog

Assalamualaikum....


      Hay sahabat blogger, kembali lagi dengan saya sii penerbit go!!_Blog. kali ini saya akan memberikan sebuah penerangan bagi para blogger yang masih newbie, tentang bagaimana cara membuat menu navigasi pada Bawah header. dari pada punya ilmu dipendam aja, mending kita bagikan kan?.
O.k sekarang kita ikuti langakah demi langkah demi tercapainya sebuah tujuan yang mulia
Cara-caranya yaitu :

1. Login dahulu ke akun blogger agan
2. Cari Template, lalu...
3. Klik Edit HTML"
4. Centangkan "Expand Widget Templates"
5. 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 kuning 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.....
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…


Pesan saya:
 Buat para sobat yang udah nggunain dan bermanfaat tlg tinggalkan komentar, atau donasi agar blog ini terus berkarya, 
              Terima Kasih telah berkunjung ^_*

0 komentar:

Posting Komentar

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link aktif pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Arsip Blog