24-01-2013, 06:33 AM
1.Sign in your blogger account
2.Navigate to Pages
![[Image: 2r76kdT.png]](http://i.imgur.com/2r76kdT.png)
3.Now click on New Page->Blank Page
![[Image: D0eGZ27.png]](http://i.imgur.com/D0eGZ27.png)
4.Give a name to your archives.
5.Change it to HTML
![[Image: 8fPa0dL.png]](http://i.imgur.com/8fPa0dL.png)
6.Copy the below code in the content.
![[Image: eulyA6H.png]](http://i.imgur.com/eulyA6H.png)
7.Thats it...Click on Publish
2.Navigate to Pages
3.Now click on New Page->Blank Page
4.Give a name to your archives.
5.Change it to HTML
6.Copy the below code in the content.
Code:
<div id="bp_toc">
<script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript">
</script><br />
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript">
</script><br />
<br />
<style>
#bp_toc {
border: 5px solid #c1bfbf;
padding: 5px;
width:100%;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #fff;
color: #000000;
padding-left: 5px;
width:60%;
}
.toc-header-col2 {
width:20%;
}
.toc-header-col3 {
width:20%;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:18px;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:18px;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:18px;
}
</style>
</div>