Jumat, 05 Februari 2010

MEMBUAT MENU HORIZONTAL UNTUK HEADER

simak caranya :

1. Log in 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 ]]>

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


.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>
<li><a href='URL-Link-Tujuan6'><b>Judul-Tujuan6</b></a></li>
<li><a href='URL-Link-Tujuan7'><b>Judul-Tujuan7</b></a></li>

</ul>

Perlu di ganti !!!
Pada teks yang berwarna merah 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://facebook.com/'>Facebook

Dan seterusnya.....

6. Simpan Lalu lihat hasilnya

7. Selesai



Met mencoba.....


kutipan dari sini

0 komentar: