How To Create Horizontal Tab Menu For Blogger Templates : Best And Simple Method

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

Posted in: Blogger Tricks