How to add tabs to a blog to navigate?!

You might be wondering how to add tabs to your blog according to the labels you add or the topic that the posts relate to. Simply to divide the topics in to specific categories.

But first you have to label your posts according to the category of the topic. See how to label the posts here.

Adding the Tab bar in to the Layout

• Go to you blog
• Click Design in the right hand top corner

• Click Layout 

• Click 'Add a Gadget' under the blog title
• From the pop up window select HTML/JavaScript option and click the plus mark

• Now you will get a pop up window with a title and content field
  Keep the title field empty and paste the bellow HTML code to your content field
  

  <!-- Navigation tabs start -->
  <div id='navibar'>
  <a href="YourDestinationLink" class="navitabs" title="Tip">TabDisplayText</a>
  <a href="YourDestinationLink" class="navitabs" title="Tip">TabDisplayText</a>
  <a href="YourDestinationLink" class="navitabs" title="Tip">TabDisplayText</a>
  <a href="YourDestinationLink" class="navitabs" title="Tip">TabDisplayText</a>
  <a href="YourDestinationLink" class="navitabs" title="Tip">TabDisplayText</a>
  <div>
  <!-- Navigation tabs end -->

• You can add as many lines as you want depending on your requirement of adding tabs.

ex:
<a href="http://castakai.blogspot.com/search/label/Technical!" class="navitabs" title="Technical!">Technical!</a>

• Click Save
• Your tabs will get added!

Customize the added tab

• Click Design > Edit HTML

• Search for the ]]></b:skin> code line
• Paste the bellow CSS code above the code line

/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:140px; height:25px; background:teal; border:2px solid black; margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:white; line-height:25px; overflow:hidden; float:left;}
a.navitabs:hover {color:white; background:grey;}
#navibar {width:760px; margin:0 auto;}
/* Navigation tabs end */



• Do the necessary changes you want according to your taste.
• You can change the color, height, width, font ... etc.
• After the changes your tab will be displayed as bellow :)