Cara Membuat Menu Horizontal Tabs di Blogspot

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.