How to add Tabs on blogger?

[This is old post, you can follow easy steps , with new blogger template designer here]
Here is a step by step procedure to add tabs for your blogger.

STEP-1 Go to Blogger Dash board

STEP-2 Go to layout section of your blog, and go to edit HTML
[Save your template, to make sure that if anything will go wrong, you can restore the things back]
STEP-3: Grab this code

#tabsB {
      float:left;
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;
      }
    #tabsB ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
      }
    #tabsB li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsB a {
      float:left;
      background:url("http://sites.google.com/site/hackbit/tableftB.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsB a span {
      float:left;
      display:block;
      background:url("http://sites.google.com/site/hackbit/tabrightB.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsB a span {float:none;}
    /* End IE5-Mac hack */
    #tabsB a:hover span {
      color:#000;
      }
    #tabsB a:hover {
      background-position:0% -42px;
      }
    #tabsB a:hover span {
      background-position:100% -42px;
      }

STEP-4 Paste this code(above code) just after body CSS which will look like this

body { 
background:$bgcolor; margin:0; 
color:$textcolor; 
font:x-small Georgia Serif; 
font-size/* */:/**/small; font-size: /**/small; 
text-align: center; 
}

STEP-5 Grab following code (customize the link as per your need)

<div id="tabsB"> 
  <ul> 
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li> 
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li> 
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li> 
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li> 
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li> 
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li> 
 <li><a href="#" title="Link 7"><span>Link 7</span></a></li> 
  </ul> 
</div>

STEP-6 Paste the above code in you HTML template after header section (the line which will look like this)

<b:widget id="Header1" locked="true" title="Experimenting Blogger (Header)" type="Header">
</b:widget>

STEP-6 Done!!, save the template and view your blog
You can get some different kind of tab design here

 Working Demo