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.
pentol nemen bud . . . . . .
BalasHapus