 |
Cara Membuat Tab Menu di Blog
Sahabat pemikir cerdas ini ada bagian dari mempercantik blog sahabat. Agar blog sahabat terlihat rapi n cantik blog sahabat perlu ditambahkan Tab Menu .Ini ada tutorial untuk membuat tab menu horizontal sahabat.Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Jika sahabat tertarik untuk membuat tab menu horizontal pada blog sahabat silakan coba tutor di bawah ini sahabat. Semoga sukses ya sahabat.
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin> kalo udah ketemu copy script dibawah
ini dan taruh diatasnya
/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
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 yang dicetak tebal biru muda bisa kamu ganti dengan gambar-gambar atau teks di bawah ini:
blackleft.gif---> blackright.gif
greenleft.gif--->greenright.gif
unguleft.gif---->unguright.gif
redleft.gif ----->redright.gif
unguleft.gif---->unguright.gif
yellowleft.gif -->yellowright.gif
blueleft.gif----->blueright.gif
whiteleft.gif----> whiteright.gif
Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;
background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;
background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini
<div id="tabshori">
<ul>
<li><a href="http://pemikir-cerdas.blogspot.com"><span>Home</span></a></li>
<li><a href="http://pemikir-cerdas.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://pemikir-cerdas.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://pemikir-cerdas.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://pemikir-cerdas.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
4. Ganti http://pemikir-cerdas.blogspot.com dengan link yang dituju. Link tersebut bisa berupa alamat blog lain atau link postingan . Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal warna kuning bisa ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :
<div id="content-wrapper">
Kalo udah ketemu copy script yang tadi diatasnya
Untuk background alamat link gambar bisa sahabat ganti jika alamat link di atas tidak berkenan di hati sahabat
6. Simpan hasil pengeditan.
Smoga berhasil ya sahabat, maaf jika ada kesalahan ya sahabat.