Senin, 14 Mei 2012

Cara Membuat Menu Horizontal

Cara membuat menu atau 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="burastabs">Home</a>
<a href="#" class="burastabs">About me</a>
<a href="#" class="burastabs">Like me</a>
<a href="#" class="burastabs">Facebook</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 HomeAbout melike me, facebook dan dll, 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 Tabs di Blogger/Blogspot:

1. Masuk ke > 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.

2 komentar:

Senin, 14 Mei 2012

Cara Membuat Menu Horizontal

Cara membuat menu atau 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="burastabs">Home</a>
<a href="#" class="burastabs">About me</a>
<a href="#" class="burastabs">Like me</a>
<a href="#" class="burastabs">Facebook</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 HomeAbout melike me, facebook dan dll, 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 Tabs di Blogger/Blogspot:

1. Masuk ke > 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.

2 komentar: