Cara Membuat Menu Horizontal

Apa yang dimaksud menu Horizontal
Menu Horizontal adalah menu-menu yang disusun secara mendatar atau
berjejer menyamping.

Contohnya seperti di bawah ini;

Ini nih, anda harus punya gambar-gambar seperti di bawah, kalau belum
punya, pakai saja punya saya nggak pa apa,..

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

Mari kita lakukan percobaan cara membuat menu Horizontal

1. Loggin ke blogger pilih Layout--> Edit HTML

2. Centang pada kotak "Expand Widget Template" 

3. Cari kode seperti ini ]]></b:skin> kalau sudah ketemu copy script
    di bawah ini dan taruh tepat di atasnya.

    

/*credits : http://mastmamanblog.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://superinhost.com/gambar/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://superinhost.com/gambar/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}

#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 anda ganti dengan gambar (text di bawah gambar) seperti contoh di atas.
Jika anda pilih warna merah maka scriptnya akan menjadi seperti ini

background: url("http://superinhost.com/gambar/redleft.gif") no-repeat left top;

background: url("http://superinhost.com/gambar/redright.gif") no-repeat right top;

3. Kemudian copy kode script berikut ini

   

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

4. Ganti http://mastmamanblog.blogspot.com dengan link yang anda tuju.
    Link bisa diisi dengan alamat blog atau link postingan anda.
    Untuk mendapatkan link postingan caranya, anda masuk edit entri
    arahkan anahpanah ke edit entri nanti di bawah akan muncul alamat
    link postingan. 

5. Cara memasangnya ada beberapa macam cara tergantung dari template
    yang digunakan, cara memasangnya begini

   

<div id="content-wrapper">

Copy script di atas dengan tekan Ctrl+F untuk memudahkan pencarian
kemudian paste di kotak find.
Kalau sudah ketemu copy script yang tadi di atasnya.

6. Simpan hasil pengeditan.

7. Coba lihat hasilnya dulu seperti apa

8. Kalau misal hasil kok kurang bagus coba scriptnya dipindah tempatnya.
    misalnya pindah ke atasnya, yaitu di atas kode </div>.
    Kalau masih belum cocok juga coba lagi yang di atasnya atau di bawahnya
    begitu terus sampai ketemu yang sesuai.

9. Kalau masih belum berhasil juga coba cara di bawah ini,

    Cari kode seperti 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>

Ganti text yang berwarna hijau sehingga akan 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 klik Simpan.

Sedikit lagi, klik tab Page Elements, kemudian di daerah Header klik
add a page element lalu pilih HTML/Javascript dan paste link tadi di
dalam kotak content terus disimpan. 
Selesai sudah, coba dilihat hasil dari experimen di atas..he..he