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