How to Create Horizontal Tabs Menu in Blogger Simple

How to Create Horizontal Tabs Menu in Blogger Simple

Tips Tricks Blogger: Open Secrets Blogspot back again with Horizontal Menu offerings for Blogger / Blogspot. Like the previous horizontal menu, horizontal menu is still struggling with CSS and HTML without Javascript / Jquery, even without the use of images, based on individual tabs, and do not use list (HTML unordered list). Post a horizontal menu is also designed to meet the demands on the comments on this post buddy Click Images How To Make 3D CSS Horizontal Menu Button Blogger / Blogspotuntuk made ​​the same horizontal menu with a horizontal menu blog. Of course, this menu has undergone some modifications to fit the additional widgets. But supposing there is similarity. Hope you enjoy and like it!,,,,,,,,,,,

 

Kode CSS:

/* Navigasi tabs silboy86.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 simple Ends */

Kode HTML:

/* Navigasi tabs silboy86.blogsot.com Starts */ 

#

" class="burastabs">Home
#" class="burastabs">About
#" class="burastabs">Blog Tips
#" class="burastabs">SEO Tips
#" class="burastabs">Contact
#" class="burastabs">Sitemap
#" class="burastabs">Advertise

Formerly advance copy & edit the HTML code above. Replace # with the URL that you want. Change is also Home, Blog Tips, SEO Tips, and so on with the anchor text you want. To increase or decrease the tab, copy / add or remove the Anchor Text </ a> on the </ div>.

How to Make a Simple Menu Horizontal Tabs in Blogger / Blogspot:

1. Go to Dashboard> Design / Rancannga> Edit HTML.

2. Copy the CSS code above,

4. Find]]> </ b: skin> (search with Ctrl + F) and place / paste CSS code right on it.

5. Save Template.

6. Go to Page Elements> Click Add a Gadget

7. After a pop up window appears, select HTML / Javascript

 

8. Enter the HTML code that was edited on a column like the following example:

  

9. Click on save.

10. Drag / sliding horizontal menu widget to the bottom / top of the header (put on the gadget slot) and save more. Done!,,,,,,

htt//silboy86.blogspot.com 

good luck......