Bikin Menu Horizontal

Kadang waktu kamu kunjungi blog lain, sering ngeliat menu horizontal bukan?? Nah, dalam trik kali ini kita akan bahas cara membuatnya. Pertama-tama marilah kita panjatkan doa kepada Tuhan YME . Oke kita langsung ke TKP .

Nah, karena saya tidak punya hosting untuk bahan-bahan, saya pinjam punya kang kEndhin aja. Oke kita akan bahas. Ini adalah gambar yang disediakan kang khendin.

blackleft.gifblackright.gif

greenleft.gifgreenright.gif

redleft.gifredright.gif

unguleft.gifunguright.gif

yellowleft.gifyellowright.gif

blueleft.gifblueright.gif

whiteleft.gifwhiteright.gif

1. Login ke Blogger -> Tata Letak -> Edit HTML -> centang tanda Expand Template Widget.
2. Cari script ini ]]></b:skin>. Kalo 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;
}

3. Tulisan yang dicetak tebal itu bisa kamu ganti sesuai warna gambar yang disediakan. Misalnya pengen tab warna ungu, tulisan tebal itu ganti dengan unguleft.gif dan ungurigth.gif.
4. Udah belom??? kok lama banget .

5. Lalu tempelkan kode ini diatas kode <div id="content-wrapper">.

<div id="tabshori">
<ul>
<li><a href="http://blogger-trik.blogspot.com"><span>Home</span></a></li>
<li><a href="http://blogger-trik.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://blogging-trick.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://blogging-trick.blogspot.com"><span>Site English Version</span></a></li>
<li><a href="http://profiles.friendster.com/jrockstarclub"><span>Profile</span></a></li>
</ul>
</div >.

Nah, URL nya ganti dengan URL yang akan dituju jika link diklik. Dan tulisan yang dicetak tebal adalah kalimat linknya.
6. Simpan editan kamu.

Gimana?? Piee to??

Related Posts by Categories