Cara Membuat Tab Menu Horisontal Sederhana

Jujur, sebelumnya saya tidak berniat mem-posting tulisan ini, karena saya yakin sudah banyak sekali teman2 sesama blogger yang menuliskan tentang Cara Membuat Tab Menu Horisontal ini, bahkan mungkin lebih canggih dan lebih baik tampilan yang dihasilkannya. Tapi terpikir oleh benak ku, toh tidak semuanya pengunjung yang datang di blog ku yang mungkin tahu. Dan lagi disini saya juga ingin berbagi pengetahuan yang saya tahu saja, skalian juga sebagai catatan pribadiku dalam proses pembuatan Tab Menu Horisontal pada blog ku yang sebelumnya tidak ada (template bawaan tidak ada tab menunya)

Di bawah ini adalah Tab menu yang terdapat di blog ku:

Nah bagi yang ingin membuat Tab menu seperti punyaku ini, ikuti saja langkah-langkah yang saya akan uraikan di bawah ini:

Langkah I:
1. Masuk ke Dasbor
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Silahkan cari di dalam template anda kode ]]></b:skin>
5. Persis sebelum kode tersebut pastekan script di bawah ini: 

.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #000000;}
.menuhorisontal ul{margin:0; padding:0; padding-left:0px; font:13px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:4px; padding:2px 2px 2px 2px; color:#000000; background:#99CCFF;}
.menuhorisontal li a:hover{color:#FFFFFF; background:#2E2EFE}

6. Klik Simpan Template

Langkah II :

1. Masuk ke Dasbor

2. Klik Tab Tata Letak

3. Klik Tab Element Halaman

4. Klik Tambah Gadget yang berada di posisi header ( atas )

Jika pada saat ini template sobat belum disetting untuk bisa menambah gadget pada header, silahkan sobak klik disini.

5. Klik pilihan menu HTML/JavaScript

6. Pastekan script berikut ini ke dalam kolom konten tersebut

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #2E9AFE; background:#58ACFA;">

<div class="menuhorisontal">
<li>

<a href="http://hadi-99.blogspot.com"><b>HOME</b></a>

<a href="http://hadi-99.blogspot.com/2010/07/table-of-content.html"><blink><b>TABLE OF CONTENT</b></blink></a>

<a href="http://hadi-99.blogspot.com/2010/07/link-teman.html"><b>LINK EXCHANGE</b></a>

<a href="http://hadi-99.blogspot.com/2010/07/aneka-bentuk-html-border-untuk.html"><b>BORDER</b></a>

<a href="http://hadi-99.blogspot.com/2010/06/cara-memasang-kode-warna-di-blog.html"><b>COLOR CODE</b></a>

</li>
</div>
</div>

7. Untuk script yang berwarna merah di atas menandakan warna latarnya, silahkan ganti dengan warna pilihan sobat agar sesuai dengan warna site sobat. Untuk mendapatkan variasi kode warna, silahkan sobat klik di sini.

8. Silahkan ganti script URL yang berwarna ungu dengan URL milik sobat.

9. Silahkan ganti script yang berwarna hijau dengan kata pilihan sobat.

10. Klik Simpan

11. Selesai

Selamat mencoba, semoga bermanfaat.