Create Table of Contents Page for your blog

Previously we have talked about creating table of contents in sidebar . That hack requires two components.There is the code which calls the contents of your blog, and provides a link in the sidebar.This hack is also similar to first one. we have done some modification in that code.You need to combine two codes in the post page.For demo you can see ours table of contents page.

Hack starts

First create a new blog post and paste the following code in Edit Html section.

You can see the whole post published in this blog here.
To see full table of content click the link below(It make take few moments)
<div id="toclink"><a href="javascript:showToc();"><b>Show Table of Content</b></a>
</div><script style="" src="http://home.planet.nl/%7Ehansoosting/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=999&amp;callback=loadtoc"></script>
<div id="toc"></div>

Remember to replace YOURBLOG with your blog name and Paste the above code in order that it looks like this.

















Now the second step is the Optional step . If you like to give style to your table of Content then copy the following code and paste it to the head section of your blog code otherwise leave it.

<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}.toc-header-col3 {
width:125px;
}
.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:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
</style>

More you can give link to your table of contents page in your blog. For that Goto layout Page and add a new HTML page Element .After that create a link text and use the link of the table of contents page which you have copied.

Technorati Tags: Blogger hacks , Table of Contents