Membuta Menu Horizotal

Pada saat membuat blog, saya kebingungan untuk membuat Menu Horizoltal, Tapi pada akhirnya saya menemukan caranya. Di sini saya akan memberi cara membuat menu horizontal.

1. Login ke blogger terus pilih Layout –> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates".
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;
}

Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;

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

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

4. Kemudian di save.
5. Lalu pergi ke menu “Page Elements”
6. 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/13/"><span>Home</span></a></li>
<li><a href="https://zhafirinperdana66.wordpress.com/2010/06/27/13/"><span>Trik-Tips</span></a></li>
<li><a href="https://zhafirinperdana66.wordpress.com/2010/06/27/13/"><span>Free Template </span></a></li>
<li><a href="https://zhafirinperdana66.wordpress.com/2010/06/27/13/"><span>Kamus</span></a></li>
<li><a href="https://zhafirinperdana66.wordpress.com/2010/06/27/13/"><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. Dan cara memasangnya ada beberapa macam tergantung dari template yang digunakan.

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