Senin, 25 Mei 2009

Membuat menu Horizontal

MENU HORIZONTAL

ini adalah salah satu caranya, tapi sebelumnya apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping).

Untuk membuatnya ikuti cara berikut ini:

1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu atau centang pada Expand Template Widget.

2. kemudian Cari script seperti ini ]]></b:skin>, kalo belum ketemu Ctrl+F lalu ketik  ]]></b:skin> trs tekan enter,kalo udah ketemu copy script dibawah ini

/*credits : http://trik-tips.blogspot.com */

#tabshori {

float:left;

width:100%;

font-size:13px;

border-bottom:1px solid #2763A5;

line-height:normal;

}

#tabshori ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabshori li {

display:inline;

margin:0;

padding:0;

}

#tabshori a {

float:left;

background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

}

#tabshori a span {

float:left;

display:block;

background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;

padding:5px 14px 4px 4px;

color:#fff;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabshori a span {float:none;}

/* End IE5-Mac hack */

#tabshori a:hover {

background-position:0% -42px;

}

#tabshori a:hover span {

background-position:100% -42px;

}


Tulisan blackleft.gif (tulisan warna merah) bisa kamu ganti dengan yang lain
Misalnya, jika kamu pilih yang warna ungu maka scriptnya menjadi seperti ini;




background: url("http://kendhin.890m.com/menu/unguright.gif") no-repeat left top;



background: url("http://kendhin.890m.com/menu/unguright.gif") no-repeat right top;

atau dengan macam-macam warna seperti di bawah ini

blackright.gif adalah warna hitam

greenright.gif adalah warna hijau

redright.gif adalah warna merah

unguright.gif adalah warna ungu

yellowright.gif adalah warna kuning

blueright.gif adalah warna biru


3. kalau sudah paste di sebelum script ]]></b:skin>, trus simpan

4. kalau sudah  Copy script berikut ini

<div id="tabshori">

<ul>

<li><a href="http://tutorial-buditkj.blogspot.com"><span>Home</span></a></li>

<li><a href="http://tutorial-buditkj.blogspot.com"><span>Tutorial</span></a></li>

<li><a href="http://buditkj.blogspot.com"><span>Free tugas tkj </span></a></li>

</ul>

</div >

5. Ganti http://tutorial-buditkj.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).


6.setelah itu pilih tata letak pilih tambah gadget kemudian beri judul dan pastekan script tadi
 Simpan hasil pengeditan.

7. Lihat hasilnya.

1 komentar: