Ngebuat Menu Horizontal

nah teman-tema kali ini saya pengen ngejalsin cara membuat menu horisontal..
alias menu menymping...
kalaw uda ada yang tau mohon di beri tambahan jika ada kekurangan....
Kayak gini ini lho:
----------- I--------
menu I daftar
----------- I--------
home I dok
----------- I--------

nah kira -kira seperti itu...
bila perlu liat aja blog ku.. ada kok contoh nya..di pojok sebelah kiri...
,mau buat gak???
ok langsung aja bro....
langkah pertama...pilih lah blog menu kalian di bawah ini...
mungkin lebih tepat nya lagi,,,,apa ya ....
ah binngung..uuuuu*P
ngertikan kan bahasa inggris jadi saya ngak perlu lagi menjelaskan nya.....
ok..........ayo kita mulai

* 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


nah bahan nya sudah komplit..sekrang saat nya beraksi....

- Login ke blogger terus pilih Layout --> Edit HTML,
tapi ingat bro jangan lupa template di backup dulu biar ntar kalaw salah data nya ngak hilang..:)
- Cari kode ini ]]></b:skin>,
kalo udah ketemu copy kode dibawah ini dan paste diatasnya

/*credits : http://tiar-trisandy.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url(" http://tiar-trisandy.blogspot.com /menu/greenleft.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://tiar-trisandy.blogspot.com /menu/greenleft.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 bisa kamu ganti bro!! dengan gambar-gambar (text dibawah gambar) contoh di atas Misalnya, jika kamu pilih yang hitam hijau maka kodemenjadi seperti ini;
background: url("http://tiar-trisandy.blogspot.com /menu/blackright.gif") no-repeat left top;
background: url("http://tiar-trisandy.blogspot.com /menu/blackright.gif") no-repeat right top;
ok bro...
paham ngak---?
kalaw uda selesai mari kita lanjut lagi.....
3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://tiar-trisandy.blogspot.com"><span>Home</span></a></li>
<li><a href="http://tiar-trisandy.blogspot.com"><span>coment</span></a></li>
<li><a href="http://tiar-trisandy.blogspot.com"><span>gambar</span></a></li>
<li><a href="http://tiar-trisandy.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://tiar-trisandy.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
ket :
kata </spand>home</span> = di ganti dengan kata yang kamu ingin kan ...ok..
trus alamat blognya juga di ganti dengan alamat blog mu....

langkah berikut nya agak susah sich masalah nya ini tergantung template nya,,,
seperti punya saya jadi nya jelek karna ngak cocok ma templatenya...
mudah-mudah han puya mu cocok....
4.cori kode di bawah ini..
<div id="content-wrapper">

biar gampang tekan aja ctrl-f---->copi kode
kemudian paste di kotak find..langsung ketumukan..ini bagi teman-teman yang make firefox...
kalaw teman-yang belum punya down load firefox...
kpoi kode di atas ke atas kode <div id="content-wrapper">

5 langsung simpan bro.......
6 law hasilnya kurang bagus.....
di pasang sembarang aja kode nya cobe dehhhhh..
tadi kan diatas kalaw kurang bagus coba di bawah kode
<div id="content-wrapper">
kalaw ngak cocok juga coba di samping nya...ok...:)
kalaw masih kurang bagus coba cara ini
hacker gak boleh cepat menyerah...heheh

- 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>

trus di ganti hinggga menjadi seprti 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
kalaw udah langsung edit lay out---klik header
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 di cari posis yang lumayan mantap dikit.hehehehee

simpan ...
selesai dehhhhhhhhhhhhhhhhhhhh..hahahahah..
selamat mencoba/.........................