cara mudah membuat menu horisontal yang keren

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.



menu horizontal blogger
demo menu horizontal
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="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:
undefined 
9. Klik save.
10. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan save lagi. DOnE! 
Previous
This is the oldest page

3 komentar

Click here for komentar
May 27, 2015 at 6:30 AM ×

makasih gan infonya bermanfaat bagi kami

Balas
avatar
admin
February 10, 2016 at 1:30 PM ×

mantap banget gan
terima kasih untuk berbagi info gan
semoga terus berkaya ya gan dan update terus....
thumbs up 4

Balas
avatar
admin
March 25, 2017 at 8:54 AM ×

kapan ya blog ane bisa kaya blog ini,, Jangan lupa kunjungan baliknya gan.. salam blogger.. :)
Tips Agar diterima Google adsense
Penyalur magang ke jepang di jawa tengah

Balas
avatar
admin

Terima telah berkunjung dan meniggalkan komentar di blog sederhana ini..!

NB :
1. Jangan berkomentar SPAM
2. Jangan meninggalakan LINK aktif karna otomatis akan terhapus.
Show Conversion Code Hide Conversion Code Show Emoticon Hide Emoticon

Thanks for your comment
Widget by