Cara Membuat Menu Horizontal Tabs Sederhana di Blogger

  
 Kali ini Saya akan menge-post info membuat Menu Horizontal masih berkaitan dengan CSS dan HTML tanpa Javascript/Jquery

Langsung Saja Belajari yaa


 Contoh Tab :

 Kode CSS:

/* Navigasi tabs Sederhana buka-rahasia.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:

<!-- Navigasi tabs Sederhana http://buka-rahasia.blogspot.com Starts -->
<div id='burasbar'>
<a href="#" class="#"></a>
<a href="#" class="#">About</a>
<a href="#" class="#">Blog Tips</a>
<a href="#" class="#">SEO Tips</a>
<a href="#" class="#">Contact</a>
<a href="#" class="#">Sitemap</a>
<a href="#" class="#">Advertise</a>
</div>
<!-- Navigasi tabs Sederhana Ends -->

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 <a href="#" class="burastabs">Anchor Text</a> di atas </div>.

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 ]]></b:skin> (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. Taraaaa Selesai sudah

Anda baru saja membaca artikel yang berkategori HTML dengan judul "Cara Membuat Menu Horizontal Tabs Sederhana di Blogger". Anda bisa bookmark halaman ini dengan URL https://anando-wputro.blogspot.com/2014/06/cara-membuat-menu-horizontal-tabs.html.