Membuat Menu Horizontal

Ada yang pingin buat menu horizontal tapi nggak tahu caranya? Cara ini aku dapat dari salah satu blog kalo pengen lihat lebih lengkap klik disini. Pengen tahu?????

Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:







Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:

pertama-tama kamu harus punya gambar kayak gini nih:










kalo nggak punya gimana? kalo nggak punya pake gambar yang telah sediain ini aja deh.

blackleft.gif

blackright.gif

redleft.gif

redright.gif

greenleft.gif

greenright.gif

blueleft.gif

blueright.gif

unguleft.gif

unguright.gif

whiteleft.gif

whiteright.gif

yellowleft.gif

yellowright.gif

Ok, bahan-bahannya sudah ada, mari kita mulai marakitnya:
1. Login ke blogger terus pilih Layout --< Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates".
2. Cari script seperti ini ]]<

/*credits : http://www.syahdaners.co.cc */
#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 dan berwarna hitam bisa kamu ganti dengan gambar-gambar (text disamping gambar) diatas tadi. 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 dimana tadi? oh ya
3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://www.syahdaners.co.cc"><span>Home</span></a></li>
<li><a href="http://www.syahdaners.co.cc"><span>Trik-Tips</span></a></li>
<li><a href="http://www.syahdaners.co.cc"><span>Free Template </span></a></li>
<li><a href="http://www.syahdaners.co.cc"><span>Kamus</span></a></li>
<li><a href="http://www.syahdaners.co.cc"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti http://www.syahdaners.co.cc dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan kamu. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox). Atau jika kamu pengen memasukkan link kategori kamu, kamu bisa klik kanan pada Kategori yang kamu pilih kemudian pilih "Copy link location"

Kemudian text yang dicetak tebal bisa kamu 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">

Nah kalo udah ketemu copy script yang tadi diatasnya


6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. Kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode >/div<. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section<

terus ganti text yang berwarna biru sehingga menjadi seperti ini:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nah itu kan tempatnya diatas, coba drag kebawah dikit terus simpan dan lihat hasilnya.
hasilnya pasti akan berbeda-beda di setiap template.
Tapi kalo kamu pengen pasang diatas Header
coba cari script >body<, trus copy paste kan script diatas tadi tepat dibawahnya kalo berhasil berarti kamu pinter, kalo gagal berarti kamu kurang kurang teliti. Coba deh kamu ulangi dari awal. Nah kalo udah pas Tinggal diatur posisi menunya biar pas. Caranya ubah script yang berwarna Hijau hingga kamu bisa dapat posisi yang pas.
Nah selamat mencoba

Related post by Category