News Update :


Cara Membuat Menu Horizontal Tabs Sederhana di Blogger



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! 
 
 
 
 
 
 
sumber:http://buka-rahasia.blogspot.com/2011/08/cara-membuat-menu-horizontal-tabs.html

Anda sedang membaca artikel tentang Cara Membuat Menu Horizontal Tabs Sederhana di Blogger dan anda bisa menemukan artikel Cara Membuat Menu Horizontal Tabs Sederhana di Blogger ini dengan url http://wawasanfadhitya.blogspot.com/2012/01/cara-membuat-menu-horizontal-tabs.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Menu Horizontal Tabs Sederhana di Blogger ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Membuat Menu Horizontal Tabs Sederhana di Blogger sebagai sumbernya.

Share on :
Bookmark and Share
| | 3 comments



Artikel Terkait

3 comments:

Taibai Li mengatakan...

qihang0525chanel handbags
michael kors outlet
oakley sunglasses
coach outlet store online
michael kors handbag
gucci outlet
true religion outlet
fitflops sale clearance
burberry outlet online
oakley sunglasses
pandora outlet
true religion sale
oakley sunglasses sale
cheap oakleys
ray ban sunglass
ray ban outlet
gucci uk
tory burch handbags
ray ban sunglasses
abercrombie
kate spade outlet
christian louboutin outlet
chanel online shop
q

xumeiqing mengatakan...

151215meiqing
louis vuitton backpack
montblanc
abercrombie
jordan shoes
michael kors outlet online
gucci handbags
canada goose outlet
nike huarache
abercrombie
kate spade handbags
nike air force 1
burberry outlet
nike air max
nike air huarache
toms
replica watches for sale
the north face jackets
uggs for women
pandora jewelry
michael kors handbags
toms shoes
coach outlet store online
fitflops
ray ban wayfarer
coach outlet online
coach factory outlet
mont blanc pens
ray ban sunglasses
mulberry handbags
hollister co
ed hardy clothing
coach outlet
ugg boots outlet
coach outlet
ugg outlet
ugg boots
ugg boots
instyler curling iron
louis vuitton outlet
ugg boots

fattoma mengatakan...

http://mchaabaty.com/dawadmi/
http://mchaabaty.com/templates/
http://mchaabaty.com/riyadh/
http://mchaabaty.com/stone/
http://mchaabaty.com/heritage/
http://mchaabaty.com/gypsum/
http://mchaabaty.com/fire/
http://mchaabaty.com/pictures/
http://mchaabaty.com/luxurious/
http://mchaabaty.com/red-bricks/
http://mchaabaty.com/factory/
http://mchaabaty.com/new/
http://mchaabaty.com/marble/

Komentar di: Cara Membuat Menu Horizontal Tabs Sederhana di Blogger

Berkomentarlah dengan sopan dan pastikan komentar anda bukan spam. Komentar spam akan dihapus.

 

Page Rank Check

Technology Blogs