Seperti
menu-menu horizontal sebelumnya, 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). Posting menu horizontal ini juga dibuat
untuk memenuhi permintaan pada komentar sobat Klik Menarik di posting Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot
untuk dibuatkan menu horizontal yg sama dengan menu horizontal sebuah
blog lain. Tentu saja menu ini telah mengalami beberapa modifikasi agar
sesuai sebagai widget tambahan. Namun sekiranya ada kemiripan lah. Hope
you enjoy and like it!
/* Navigasi tabs Sederhana buka-rahasia.blogsot.com Starts */Kode HTML:
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 */
<!-- Navigasi tabs Sederhana http://buka-rahasia.blogspot.com Starts -->
<div id='burasbar'>
<a href="#" class="burastabs">Home</a>
<a href="#" class="burastabs">About</a>
<a href="#" class="burastabs">Blog Tips</a>
<a href="#" class="burastabs">SEO Tips</a>
<a href="#" class="burastabs">Contact</a>
<a href="#" class="burastabs">Sitemap</a>
<a href="#" class="burastabs">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. DOnE!
Anda sedang membaca artikel tentang Cara Membuat Menu Horizontal Tabs Sederhana di Blogger. Anda bisa bookmark halaman ini dengan URL http://rujakcemil.blogspot.com/2012/05/cara-membuat-menu-horizontal-tabs.html.
Jika Anda menyukai Artikel di blog ini, Silakan masukkan email Anda di bawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit.
|
0 komentar:
Posting Komentar