Tips membuat menu horizontal

Tips membuat menu horizontal
apa itu menu horizontal? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). seperti gambar dibawah ini:





coba simpan templete anda sebelum meng edit templete anda!
pertama-tama anda harus punya gambar seperti di bawah ini:

dan

bagaimanakalau saya tidak punya? kalau anda tidak punya gambar yang sepertidi bawah ini anda bisa membuat secara total di www.freshgenerator.com atau anda juga bisa menggunakan gambar di bawah ini!

blackleft.gif	blackright.gif
greenleft.gif	greenright.gif
redleft.gif	redright.gif
unguleft.gif	unguright.gif
yellowleft.gif	yellowright.gif
blueleft.gif	blueright.gif
whiteleft.gif	whiteright.gif

setelah anda membuat gambar seperti di atas anda bisa melanjutkan:
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup.
2. Cari script seperti ini ]]>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://ntips-trik.blogspot.com */<br />#tabshori {<br />float:left;<br />width:100%;<br />font-size:13px;<br />border-bottom:1px solid #2763A5; /* Garis Bawah*/<br />line-height:normal;<br />}<br />#tabshori ul {<br />margin:0;<br />padding:10px 10px 0 50px; /*Posisi Menu*/<br />list-style:none;<br />}<br />#tabshori li {<br />display:inline;<br />margin:0;<br />padding:0;<br />}<br />#tabshori a {<br />float:left;<br />background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;<br />margin:0;<br />padding:0 0 0 4px;<br />text-decoration:none;<br />}<br />#tabshori a span {<br />float:left;<br />display:block;<br />background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;<br />padding:5px 14px 4px 4px;<br />color:#fff;<br />}<br />/* Commented Backslash Hack hides rule from IE5-Mac \*/<br />#tabshori a span {float:none;}<br />/* End IE5-Mac hack */<br />#tabshori a:hover {<br />background-position:0% -42px;<br />}<br />#tabshori a:hover span {<br />background-position:100% -42px;<br />}

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

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

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

Kalo sudah selesai mari kita lanjutkan langkah berikutnya
3. Copy script berikut ini

<div id="tabshori"><br /><ul><br /><li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li><br /><li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li><br /><li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li><br /><li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li><br /><li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li><br /></ul><br /></div >

4. Ganti http://intips-trik.blogspot.com dengan link yang anda tuju. Link tersebut bisa berupa alamat blog lain atau link postingan anda sendiri. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa anda ganti dengan text yang anda 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">

untuk mempermudah mencari lokasi scriptnya, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, 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 . 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'"><br /><b:widget id="'Header1'" locked="'true'" title="'your" type="'Header'/"><br /></b:section>

coba ganti text yang berwarna hijau sihingga menjadi seperti ini:

<br/><br/><br /><p align="”left”"><textarea name="”code”" rows="”6″" cols="”450″"><br /><b:section class="'header'" id="'header'" maxwidgets="'2'" showaddelement="'yes'"><br /><b:widget id="'Header1'" locked="'false'" title="'your" type="'Header'/"><br /></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, nha itu kan tempatnya diatas, coba drag kebawah sedikit, terus simpan dan lihat hasilnya.mugnkin pembaca bertanya, kenapa anda tidak pasang menu horizontal di log? jawaban saya: awalnya saya sudah memasangmenuhorizontal tapi saya baru saja mengganti templete baru jadi semua editan saya hilangdi telan delete.oia hasilnya pasti akan berbeda-beda di setiap template. coba diteliti lagi langkah-langkahnya dan dipahami maksudnya. Good luck...
tips ini dari tips-trik.blogspot.com perubahanhanya dilakukan untuk mempermudah pengunjung melakukan alih bahasa.

kalau ada yang memiliki tips membuat menu horizontal silahakan anda masukan komentar anda di bawah ini. terima kasih