Create Sitemap / Table of Contents Page On Blogger/Blogspot - How?

What is Table of Contents?

Table of contents is a Very Important Feature Which Displays All your Blog Post Within a Single Page. It Seperately Displays Your Blog Contents By Label/Categories.

View Demo of this Table of Contents

How to Add Table of Contents to Blogger?

Its Simple Follow My Steps Given Below:

1. Goto Blogger Dashboard.

2. Create a New Page By Clicking on Pages---> New page.

3. Now on the New Page Select HTML.

4.  Now Paste the Given Below Code on the Page.

<style type="text/css">
#toc{

width:99%;

margin:5px auto;

border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

}
.labl{

color:#FF5F00;

font-weight:bold;

margin:0 -5px;

padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;

border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;

}
.labl a{

color:#fff;

}
.labl:first-letter{t

ext-transform:uppercase;

}
.new{

color:#FF5F00;

font-weight:bold;

font-style:italic;

}
.postname{

font-weight:normal;

background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));

}
.postname li{

border-bottom: #ddd 1px dotted;

margin-right:5px

}
</style>
<div id="toc"><script type="text/javascript" src="http://bloggerprofessionals.googlecode.com/files/MyTOC.js"></script>
<script src="http://www.gobloggertricks.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> 

</script></div>

5. Now Replace gobloggertricks With Your Blog Name.

6. Now Publish the Page. That's it. You are Done.

If You have Any Queries Comment Below.