Membuat Menu Horizontal

Posted: Juni 28, 2010 in Uncategorized

Ada yang mau buat Menu Horizontal, tp gak tahu caranya. Disini Q mw ngasih cara buat Menu Horizontal.

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&quot;) 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&quot;) 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. Kemudian di save.
4. Lalu pergi ke menu “Page Elements”
5. Pilih “Add a Gadget –>HTML/JavaScript” kemudian masukkan kode berikut kedalamnya:

<div id="tabshori">
<ul>
<li><a href="https://zhafirinperdana66.wordpress.com/2010/06/27/8/"><span>Home</span></a></li>
<li><a href="https://zhafirinperdana66.wordpress.com/2010/06/27/8/"><span>Trik-Tips</span></a></li>
<li><a href="https://zhafirinperdana66.wordpress.com/2010/06/27/8/"><span>Free Template </span></a></li>
<li><a href="https://zhafirinperdana66.wordpress.com/2010/06/27/8/"><span>Kamus</span></a></li>
<li><a href="https://zhafirinperdana66.wordpress.com/2010/06/27/8/"><span>Profile</span></a></li>
</ul>
</div >

Kode yang tebal adalah linknya dan yg miring adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti itu.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s