Membuat Menu Horizontal Di Blog

Lansung aja yach dari pada bertele-tele lama-lama bisa jadi pusing nich.
Oke begini cara kerjanya,Kita lansung praktek aja siiipkan?


1. Login dahulu ke blogger Sobat terus sobat pilih Layout --> Edit HTML, terus coba beri tanda centang pada kotak "Expand Widget Templates". Dan jangan lupa template di backup dulu Sobbb.......!!!!!.
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") 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 Ada dicetak tebal tersebut bisa Sobat ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika Sobat 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;

Paham tidak maksudnya ini.
Kalau Sobat sudah selesaikan hal yang diatas mari kita lanjutkan kembali..
 
3. Copy script berikut ini

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

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

caranya supaya lebih simple, copy kan script diatas lalu tekan Ctrl-f kemudian paste di kotak find, pasti lansung ketemu. Kalo sudah ketemu copy script yang tadi diatasnya

6. Cobalah simpan hasil pengeditan.
7. Dan Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindahkan lagi tempatnya, Contohnya 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 Sobat cara yang 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 Sobat ganti text yang berwarna hijau sihingga 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 ya Sobat

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, tuh itu kan tempatnya diatas, coba didrag kebawah sedikit, terus simpan dan lihat hasilnya.

Hasilnya pasti akan berbeda-beda diDalam setiap template.
kalaupun berhasil berarti Sobat seorang yang pintar, Namun kalau gagal berarti kamu kurang pinter :D  coba diteliti lagi langkah-langkah Pembuatannya dan Cobalah dipahami maksudnya, Semoga Succes ya Sob.