I get a lot of emails from users asking that how I created the tab menu in my blog home page. Have a look :

The reason why I love tab menu bar is that is consumes very less space and gives a lot of options. So here is a simple method with which you can create this horizontal tab menu for blogger templates in no time.

Lets start :

Just copy the code below and paste it your blog where you want the tab bar to appear.

<style type=”text/css”>
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #77d0ee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb; border-bottom:0px solid #0199cb; float: left;
display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: “Arial”, Serif;
font-size: 12px; font-weight: 900; color: #222}
</style>

<form action=”tabtampil.html” method=”get”>
<div id=”TabTampil” class=”TabTampil”>
<div style=”width: 370px;” class=”TTs”> <a>Tab 1 Name</a> <a>Tab 2 Name</a> <a>Tab 3 Name</a></div>
<div style=”width: 350px; height: 300px;” class=”Halamans”>
<div class=”Halaman”>
<div class=”Alas”>
Tab 1 content goes here
Tab 1 content goes here
Tab 1 content goes here
</div>
</div>

<div class=”Halaman”>
<div class=”Alas”>
Your tab 2 content goes here
Your tab 2 content goes here
Your tab 2 content goes here
</div>
</div>

<div class=”Halaman”>
<div class=”Alas”>
Tab 3 content goes here
Tab 3 content goes here
Tab 3 content goes here
</div>

</div>
</div>

</div></form>

<script style=”text/javascript” src=”http://gagan.exe.googlepages.com/newscriptab.js”></script>
<script type=”text/javascript”>tabtampil_inisial(‘TabTampil’);</script>

Color conventions used :

Blue Color is for changing the text.
Red Color is for changing the color of the text and background.
Green Color is for changing the height and width of the horizontal tab bar.

Troubleshoot :

If you are getting any XML error in saving this code, then download the code from here and then paste it in your blog.

Credits : Templates-Gallery

Must read : How To Change The Fonts Of The Text In Ad Units : Google Adsense Update

Related Posts via Categories

• Adsense Earnings based on Buying Keywords
• 20+ Codes and Hacks Every WordPress User Should Know
• Use Google Related Links To Display Related Articles In Your Blog
• How To Add Gravatar Beside Post Title In Blogger : Tutorial
• How to Create Author.php Page For Your WordPress Blog
• How To Show Next and Previous Post Below Comment Box
• Understanding Different Types Of Hosting
• Moving to Custom Domain in Blogger
• Wblogger The Best Offline Blogging Client
• Welcome To HTML Tutorials : Introduction : Lesson 1