MEMBUAT MENU HORIZONTAL TABS

Senin, 16 Januari 2012

MEMBUAT MENU HORIZONTAL TABS

Tips Trik Blogspot : Catatan KomputerKu Kembali Memberikan Tutorialnya lagi dengan Membuat Menu Horizontal untuk Blogger/Blogspot. Seperti menu-menu horizontal yang Lainnya , menu horizontal ini masih berkutat dengan CSS dan HTML tanpa Javascript/Jquery, bahkan tanpa menggunakan gambar, berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Tentu saja menu ini telah mengalami beberapa modifikasi agar sesuai sebagai widget tambahan. Namun sekiranya ada kemiripan lah. Hope you enjoy and like it!

Kode CSS:

/* Navigasi tabs Sederhana sembarangdengah.blogsot.com Starts */
a.burastabs, a.burastabs:link, a.burastabs: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.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

Kode HTML:

#" class="burastabs">Home
#" class="burastabs">About
#" class="burastabs">Blog Tips
#" class="burastabs">SEO Tips
#" class="burastabs">Contact
#" class="burastabs">Sitemap
#" class="burastabs">Advertise

Sebelumnya copy & edit terlebih dahulu kode HTML di atas. Ganti # dengan URL yg dikehendaki. Ganti juga Home, Blog Tips, SEO Tips, dan seterusnya dengan anchor text yg diinginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian #" class="burastabs">Anchor Text di atas

Cara Membuat Menu Horizontal Tabs Sederhana di Blogger/Blogspot:

1. Masuk ke Dashboard > Design/Rancannga > Edit HTML.

2. Copy kode CSS di atas,

4. Cari ]]> (cari dengan Ctrl + F) & letakkan/paste Kode CSS tepat di atasnya.
5. Save Template.
6. Masuk ke Page Elements > Klik Add a Gadget