Horizontal Tab Menu 10

Kemaren saya dapet permintaan supaya posting cara buat tab menu halaman. Yah saya berusaha memenuhi permintaan mereka. Tapi jangan diketawaain ya, kalo penjelasannya amburadul...
Pengen punya tab menu halaman di blog kamu. Tab menu sebenarnya buanyak macam dan jenisnya. Cuman ini ada satu jenis yaitu Horizontal tab menu 10, yang sudah saya praktekkan di blog saya.
Sebenarnya kalau kalian mau belajar tinggal lihat di sini. Tapi karena artikelnya bahasa Inggris, saya ingin sedikit membantu bagi sobat yang kesulitan memahaminya. Nah gini nih....


Kalo di artikel di link itu, kita musti download gambar dan kemudian di link di googlepages atau yellow pages. Itu maksudnya supaya gambar yang kita pake di blog kita berhubungan sama blog kita sendiri. Akan tetapi, daripada kerepotan, (termasuk saya) saya langsung menuju langkah berikut ini ...

Langkah Pertama
1. Login ke blog sobat, lalu masuk ke menu layout.
2. Setelah itu klik tab menu Edit HTML.
3. Disarankan supaya kamu klik download full template. Ini dimaksudkan supaya bila nanti ada kesalahan langkah yang kamu lakuin dan template kamu rusak. Kamu bisa copy semua kode yang sudah kamu download itu ke Edit HTML, dan blogmu akan kembali seperti semula.
4. Copy dan paste di atas kode ini (klik dulu link ini) Langkah 1 nomor 7
Ini nih kodenya, taruh di atas kode di atas tadi. Di atasnya loh. Jangan sampe keliru...

/*- Menu Tabs 10--------------------------- */ /*credits : http://www.exploding-boy.com */ #tabs10 { float:left; width:95%; font-size:13px; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url("http://ahom24.googlepages.com/tableft10.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url("http://ahom24.googlepages.com/tabright10.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; }

5. Cari kode berikut pada Edit HTML di blogger kamu
liat di link ini Langkah 1 Nomor 8

6. Ganti kode berikut (lihat yang warna merah). Jangan dihapus semua loh. Cuma ganti sedikit doang. Perhatiin link ini Langkah 1 Nomor 9


7. Klik . Tunnggu sebentar sampai perubahan kamu intu tersimpan


Langkah Kedua
1. Klik pada tab halaman Page Element, kayak gambar ini nih....

2. Klik pada tab halaman Add a Page element yang ada di atas header element. Coba lihat gambar ini deh....

3. Setelah masuk ke window pop up, Klik tombol add to blog pada HTML/JavaSript, kayak gambar di bawah ini nih (supaya juelas gitu loh)...

4. Copy dan paste semua kode di bawah ini pada kolom tersebut.

<div id="tabs10"> <!-- tabs10 begin --> <ul> <!-- Change the links with your own links --> <li id="current"><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Products</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="Support.html"><span>Support</span></a></li> <li><a href="#"><span>Order</span></a></li> <li><a href="http://www.obralplus.com/?id=rohman"><span>Obral Plus</span></a></li> <li><a href="http://www.resepbisnis.com/?id=rohman"><span>Belajar Website</span></a> </ul> </div ><!-- tabs10 end -->

5. Jangan lupa alamat link nya diganti sesuai keinginanmu. Gantinya di "#". Nah # itu diganti alamay link. Misalnya http://google.com. Inget tanda " yang menjepit link jangan dihapus loh. Terus nama menu juga bisa diganti. Contohnya Home itu bisa diganti Menu, tinggal diketik aja.. Ati-ati loh, pokoknya jangan menghapus yang laen. Oke. Cukup menghapus yang perlu dihapus, dan mengganti yang perlu diganti... Ya...!!!
6. Klik
7. Selesai. Lihat deh hasilnya di blog kamu.... Di reload yah...

(Sori yah, kalo beberapa kode musti kamu lihat di css library. Soalnya aku belum bisa masukin scrip sebagai teks saat posting. Kalau ada yang bisa, tolong diajarin ya ....

SELAMAT MENCOBA