MEMBUAT TAB HORISONTAL SEDERHANA

Membuat tab horisontal,lihat lngkah-langkah ini :

Kode CSS:

/* Navigasi tabs Sederhana 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:white; 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

7. Setelah pop up window muncul, pilih opsi HTML/Javascript

8. Masukkan Kode HTML yg telah diedit tadi pada kolom seperti contoh berikut:

 

9. Klik save.

10. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan save lagi. DOnE!

Diposting oleh Dhanalova
ARTIKEL TERKAIT

MOBILE TEMPLATE DESIGN
Created | By: @ Dhanalova