Type the above code in Edit Html tab of Post Editor when creating your post and you will get the letters enclosed ( in this case – the number ‘1′ ) above your line.When the reader comes across such a superscript when reading a book he automatically looks at the bottom of the page for details on ‘HTML’. In a web page this is done by converting ‘1′ into an anchor link2 pointing to the foot of the page. To do this we use this code :
<a href=’#HTML’>1</a>
Now the number is converted into a link. The full code is :
<a href=’#HTML’>¹</a>

The Last step is to provide a target for the link so that when the viewer clicks on ‘1′ the page rolls down immediately to the Footnote at the bottom. At the bottom of your post type
<a name=’HTML’>HTML</a>
Check this out by clicking on ‘1′ at the top and the page will roll down immediately to the explanation at the bottom.
1. HTML : Hypertext Markup Language.
2. Anchor Link : A link which jumps directly to a specific point on a page, instead of letting the user scroll around to find what he/she is looking for.

CREATING THE GRAPHICS
The first step requires you to have four graphics ready. If not you can head over to any online logo creator to create some graphics. I went to Cooltext.com and created four Logos. Then I loaded them into Irfanview ( a free image editor) and resized each of the graphics to 600 x 150 pixels.
UPLOAD GRAPHICS TO A FREE HOST
The next step is to upload all the graphics to a free host like Googlepages and copy down their URLs. For detailed information on this see How to Upload files.

MODIFYING THE CSS
The next step is to modify the CSS in your blog. For this login to your Dashboard and click on Layouts of the blog you wish to modify. Then click on Edit Html subtab of Template tab at the top. First backup your template by clicking on the Download Full Template link on this page. Scroll down and add this code just after the <title> and </title> tags :

<!– compliance patch for microsoft browsers –>
<!–[if lt IE 7]>
<script src=”http://www.andyrutledge.com/ie7/ie7-standard-p.js” type=”text/javascript”>
</script>
<![endif]–>

This is a compliance patch for microsoft browsers. Then scroll down and add the following code after the <b:skin><![CDATA[ and before the ]]></b:skin> tags :

#picture {
margin: 5px auto 0;
width: 600px;
height: 150px;
background: url(”DEFAULT GRAPHIC HEADER URL”) no-repeat top left;
clear: both;
}
#nav {

margin: 0 auto;
margin-left:-10px !important;
width: 660px;
height: 40px;
background: #fff;
clear: both;
}
#nav ul {
list-style: none;
line-height: 40px;
font-weight: bold;
font-size: 12px;
}
#nav li {
float: left;
background: transparent;
}
#nav li a {
width:200px;
line-height: 40px;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#nav ul li a:hover {
color: #fff;
background: #000;
}
#nav li ul {
position: absolute;
background: #fff;
left: -5000px;
top: 50px;
}
#nav li li {
width: 600px;
}

li#blue a {
background: #09f;
}
li#red a {
background: #c00;
}
li#green a {
background: #390;
}
li#blue:hover ul {
left: auto;
margin-left: -40px;
width: 350px;
height: 150px;
}
li#red:hover ul {
margin-left: -240px;
left: auto;

width: 600px;
height: 150px;
}
li#green:hover ul {
margin-left: -440px;
left: auto;
width: 600px;
height: 150px;
}