Membuat Tab Menu Horizontal Classic

Tab menu merupakan hal yang sangat berguna dalam navigasi di blog dan website. Karena dengan tab menu ini kita bisa melihat pa aja isi dari blog atau web tersebut.

Sebenarnya ada dua type yang bisa kita jadikan patokan untuk membikin tab menu.
Type yang pertama adalah tab menu biasa atow classic.
N yang kedua adalah tab menu yang bisa nongol kayak di OS Macintosh.

Untuk kali ini yang akan di bahas adalah cara membikin tab menu classic.
Contohnya seperti ini nich....



So apa aja nich yang diperlukan untuk membuat ni tab menu....
Berikut ini hal-hal yang harus kamu lakuin :

1. Login ke blogger atow blogspot -> Layout -> Edit HTML
2. Sebelum kamu mulai mengedit, kamu download dulu HTML kamu. Buat jaga2 kalo ERROR
3. Cari kode ini ]]></b:skin>. Nah kalo udah ketemu copy script dibawah ini dan paste di atas code ]]></b:skin> ini

/*credits : http://sumber-infoku.blogspot.com */
#bikin-tab {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#bikin-tab ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#bikin-tab li {
display:inline;
margin:0;
padding:0;
}
#bikin-tab a {
float:left;
background: url("http://img99.imageshack.us/img99/4427/hitamdownoy0.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#bikin-tab a span {
float:left;
display:block;
background: url("http://img143.imageshack.us/img143/6329/hitamcrossfi5.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#bikin-tab a span {float:none;}
/* End IE5-Mac hack */
#bikin-tab a:hover {
background-position:0% -42px;
}
#bikin-tab a:hover span {
background-position:100% -42px;
}

4. background: url("http://img99.imageshack.us/img99/4427/hitamdownoy0.gif") no-repeat left top;

background: url("http://img143.imageshack.us/img143/6329/hitamcrossfi5.gif") no-repeat right top;

alamat url-nya bisa kamu ganti dengan alamat url gambar yang pengen kamu masukin buat background tab-nya.
5. Berikutnya copy script berikut ini :

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

6. Ganti " http://sumber-infoku.blogspot.com " dengan link yang tujuan kamu. Link tersebut bisa berupa alamat blog atau postingan kamu.
7. Tahap terakhir adalah tahap pemasangan. Ada dua cara memasangkan tab menu ini, pertama yaitu langsung dari HTML dan yang kedua secara tidak langsung yaitu di Layout -> Page Elements

* Secara langsung :
Carilah script berikut ini <div id="content-wrapper">
Nah apabila sudah ketemu, maka script yang kamu copy tadi kamu taruh di atas kode ini <div id="content-wrapper">

* Secara tidak langsung :
Setelah kamu menyimpan hasil pengeditan tadi pergilah ke Layout -> Page Elements -> Add a Page Element. Lebih bagus apabila Add a Page Element-nya ada di bawahnya Header.Kemudian kamu pilih java script, trus letakkan script yang kamu copy tadi ke dalam kotak yang tersedia, dan save.

SELESAI ....