Cara Membuat Menu Horizontal Tabs di Blogspot

obat Darmanto semua,pada Tutorial Blog kali ini saya akan berbagi Cara Membuat Menu Horizontal untuk Blogger/Blogspot.Cara Membuat menu horizontal ini sangat mudah dan berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Catatan ini untuk memberikan jawaban salah seorang sobat pada catatan saya yang berjudul Cara membuat halaman blog.

Langsung saja inilah Tutorial blog bagi para sobat untuk Cara Membuat menu horizontal pada blogger/blogspot:

1.Login ke dasbor blog milik sobat
2.Klik Template-Edit HTML dan centang Expand Template Widget
3.Copy kode CSS dibawah ini dan letakkan kode tersebut tepat diatas kode ]]></b:skin>

/* Navigasi tabs Sederhana darmanto.com Starts */
a.darmantotabs, a.darmantotabs:link, a.darmantotabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.darmantotabs:hover {color:#FFFFFF; background:#666666;}
#darmantobar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

4.Klik Simpan.

Setelah memasukkan kode CSS pada template blog milik sobat,buka Tata Letak,Tambah Gadget dan pilih HTML/JavaScript.
Copy dan paste kan kode dibawah ini pada kolom HTML/Javascript:

<!-- Navigasi tabs Sederhana http://www.darmanto.com Starts -->
<div id='darmantobar'>
<a href="#" class="darmantotabs">Home</a>
<a href="#" class="darmantotabs">About</a>
<a href="#" class="darmantotabs">Blog Tips</a>
<a href="#" class="darmantotabs">SEO Tips</a>
<a href="#" class="darmantotabs">Contact</a>
<a href="#" class="darmantotabs">Sitemap</a>
<a href="#" class="darmantotabs">Advertise</a>
</div>
<!-- Navigasi tabs Sederhana Ends -->

Setelah itu Simpan.

Keterangan Cara mengisi Menu Horizontal

-Ganti # dengan URL yang dikehendaki. Ganti juga Home,About, Blog Tips, SEO Tips, dan seterusnya dengan anchor text/judul menu tabs yang diinginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian <a href="#" class="darmantotabs">Anchor Text</a> di atas </div>.

- Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan simpan lagi. 

-Demo hasil Tutorial Blog Membuat menu horizontal bisa sobat liat seperti pada gambar diatas.

OK sobat Darmanto semua,semoga Tutorial Blog pada catatan kali ini mengenai Cara Membuat Menu Horizontal di Blogspot/blogger berhasil sobat praktekkan.Bila ada yang masih bingung silahkan sampaikan pada kolom komentar.