Adding tabs to a classic template

Look above at Cross stitching like crazy:


I've added tabs to an out-of-date template.
I'm very pleased with myself, I must say.

So, how did I do it?
I went to this site:
Markandey's Blog

This is what he told me to add:


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)

• Link 1
  
  
• Link
  2
  
  
• Link
  3
  
  
• Longer
  Link Text
  
  
• Link
  5
  
  
• Link
  6
  
  
• Link
  7
  
  

STEP-6 Paste the above code in you HTML template after header section (the line which will look like this) title="Experimenting Blogger (Header)" type="Header"> STEP-6 Done!!, save the template and view your blog