Minggu, 24 Januari 2010

Membuat Tab Menu Horizontal

Halo, teman-teman, berjumpa lagi di blog ini. Hari ini saya akan memposting sebuah artikel yang berisi tutorial tentang cara membuat tab menu horizontal. Simak deh tutorialnya. Caranya adalah sebagai berikut.

1. Pertama, teman-teman harus punya gambar sebagai latar belakng dengan ukuran sekitar 100px x 50px, atau lebih dari itu juga boleh.
2. Terus upload gambar terasebut.
3. Kemudian, kopi pastekan kode berikut di atas kode ]]></b:skin>

/* easyblogtrick.blogspot.com */
#ebt {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #ffffff;
line-height:normal;
}
#ebt ul {
margin:0;
padding:10px 10px 0 40px;
list-style:none;
}
#ebt li {
display:inline;
margin:0;
padding:0;
}
#ebt a {
float:left;
no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#ebt a span {
float:left;
display:block;
background: url("http://i425.photobucket.com/albums/pp335/egobslank/tab.jpg") no-repeat right top;
padding:5px 5px 5px 5px;
color:#fff;
}

#ebt a span {float:none;}

#ebt a:hover {
background-position:0% -42px;
}
#ebt a:hover span {
background-position:100% -42px;
}

kode yang berwarna biru adalah kode warna yang digunakan untuk garis bawahnya sedangkan kode yang ditandai dengan warna hijau adalah pengaturan posisi tabnya,dan kode yang dikasih tanda dengan warna ungu adalah backgroundnya, replace aja dengan alamat background yang teman-teman upload sebelumnya.

4. Kalau sudah, disimpan aja templatenya.
5. Setelah itu masuk ke Page Element, Klik Add a gadget di bagian header, kemudain klik add HTML/Java Script.
6. ISikan kode ini kedalamnya.

<div id="ebt">
<ul>
<li><a href="http://easyblogtrick.blogspot.com/"><span>Nama Yang Tampil</span></a></li>
<li><a href="http://easyblogtrick.blogspot.com/"><span>Nama Yang Tampil</span></a></li>
<li><a href="http://easyblogtrick.blogspot.com/"><span>Nama Yang Tampil</span></a></li>
<li><a href="http://easyblogtrick.blogspot.com/"><span>Nama Yang Tampil</span></a></li>
</ul>
</div>

Ganti easyblogtrick.blogspot.com dengan nama blog Anda, dan isi nama yang tampil dengan judul menu teman-teman.
Clear deh!!
Selamat Mencoba!!^^

Sumber dari :

Tidak ada komentar:

Posting Komentar