Tips Trik Blogger: Buka Rahasia Blogspot kembali lagi dengan
persembahan Menu Horizontal untuk Blogger/Blogspot. 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!
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!
Tidak ada komentar:
Posting Komentar