How To Create Automatic Horizontal Tabs in Blogger From Label Widget

Ever wondered how it would be if you had a row of horizontal Navigational tabs from your own Label widgets?Truth to be told I had actually tried that trick manually long back and didn't like the end result so went back to the drawing board.Now Bloggers Own Label widget is capable of rendering Automated Tabs which is much more appealing that going for the Css menu drop downs which have some Mouse over event issues.
                           The beauty of this Label widget is that its updated automatically which means that you needn't even bother about managing them as they will be added then and there when ever a new Label is created.You can also customize the Labels to be shown just like how you would have been doing in the normal manner.All it involves here is a little bit of tinkering with the blogger template code and altering your Css but everything should be fine as long as you follow the instructions carefully.


Step1) Download a copy of your template,so that if anything wrong happens you will be able to revert back your changes.


Step2) Head over to Blogger>>>Design?>>Edit Html>>>Click On Expand Widgets


Step3)Look for the following Piece of code(Use Ctrl +F to search for it faster)

]]></b:skin>

Step4)Now Copy the following Piece of Code:

.techArena-label-list h2 { 
    display: none; 
} 
.techArena-label-list a { 
    color: #333333; 
} 
.techArena-label-list { 
    background: #E1D4C1; 
    height: 35px; 
border:1px solid #DBC8AD; 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
box-shadow: 5px 5px 5px #CCCCCC; 
    margin: 0 auto; 
    padding:0px; 
    text-shadow: 0 1px 0 #E1D4C1; 
    text-transform: none; 
    width: 960px; 
} 
.techArena-label-list li { 
    border-right: 1px solid #666; 
    color: #333333; 
    float: left; 
    font: bold 12px Arial; 
    margin: 0 2px 5px 0; 
    padding: 0px 14px; 
    text-transform: uppercase; 
} 
.techArena-label-list ul { 
    float: left; 
    list-style: none outside none; 
    margin-bottom: 0; 
    margin-left: 10px; 
    padding: 0; 
    width: 920px; 
}

Step5)Now paste it just Above b:Skin such that your final code looks like this:

techArena-label-list ul
float: left;
list-style: none outside none;
margin-bottom: 0;
margin-left: 10px;
 padding: 0;
width: 920px;
}
]]></b:skin>

Step6) Now search and locate either one of the followings:
For Older Templates:

<div id='content-wrapper'>

If using New Blogger Templates then:

<div class='tabs-outer'>

Then Paste thefollowing code above either of them:

<div class='techArena-label-list'>
<b:section class='techArena-label-list' id='techArena-label-list' 
preferred='yes' showaddelement='no'> 
<b:widget id='Label1' locked='true' title='Labels' type='Label'/> 
</b:section></div>
<div class='clear'>
&#160;</div>

Step7) You are almost done.Now save the Template and we are ready to roll.Now head to your Design View>>>Page Elements>>Click on Edit in the Labels Section
Step8) Be VERY CAREFUL IN THIS STEP.Its preferable to choose Labels which are limited like around 10 or 20 and do not select all of them.Or choose which labels to display at your discretion.

Step9) The Horizontal Tabs will work only when the Display used it LIST.Now save your elements & take a look at your blog to be Awed.