Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Monday, February 16, 2009

Membuat Navigasi Menu Di Bawah Header (2)


Kembali lagi ke topik tutorial blog,kali ini kita akan belajar cara membuat menu navbar seperti yang terlihat pada gambar di atas.. dimana kegunaan dari navbar ( Navigation Bar ) ini adalah untuk membantu pengunjung melakukan akses jalan pintas langsung menuju ke sebuah kategori dalam blog kita.Berikut adalah step-stepnya..

1. Sign in ke account blog anda,kemudian pilih TATA LETAK –> EDIT HTML


NB: Backup dulu template anda untuk mencegah hal-hal yang tak diinginkan nantinya..

2. Masukkan kode dibawah ini tepat di atas 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;
}


3. Kemudian masukkan kode dibawah ini 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>
<li><a href='URL-Link-Tujuan6'><b>Judul-Tujuan6</b></a></li>
<li><a href='URL-Link-Tujuan7'><b>Judul-Tujuan7</b></a></li>
<li><a href='URL-Link-Tujuan8'><b>Judul-Tujuan8</b></a></li>
</ul>
-Ganti kode berwarna Orange dengan URL Alamat Link Tujuan Anda.
-Ganti kode berwarna Merah dengan Judul Dari Link Tujuan Anda.
Info GauL

Simpan pekerjaan anda ( Simpan template ).. Lalu lihatlah hasil akhirnya.
Contoh Navbar ini bisa dilihat disini
Bagaimana? sudah tampil ? kalau sudah,selesai deh... ^^

InFo GauL

Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

13 comments:

meletakkan searching disamping menu???

May 23, 2009 at 2:46 PM Visitor
Anonymous said...

kalo mo edit warna dasar di drop menu nya gimana bang

makasih brow,atas wejangannya.Salam kenal.

membuat menu seperti di blog ini gmn?

makasih buat info nya mau di coba dulu

Langsung praktek....

Tank's sob...langsung meluncur ke TKP....

WAH, MANTAP GAN KETEMU DECH SOLUSINYA, MAKASIH YA....

Artikel yang sangat menarik sekali, mo praktek langsung....

thank info caranya ,,sobb,, follow back yaa dan like page nya hhee

makasih tipsnya mas dah aku praktein berhasil thank you kapan - kapan mampir ke blogku ya litelwater.blogspot.com

kode kedua gak ketemu

kode kedua gak ketemu

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra