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


Tentang hidayat
Hanya seorang manusia biasa

4 Responses to MEMBUAT MENU HORIZONTAL UNTUK HEADER

  1. Oh ya Gan,ane pakai Blogspot.

  2. Kalau link “Daftar Isi” yang ada di menu Horisontal itu buatnya gimana Gan,kalau tahu bagi doong tips nya,Tanks.

  3. taruna says:

    wah,saya kok gak ada kode ya
    mohon infonya

Tinggalkan komentar