Create Table of Contents Page With Thumbnail in Blogger

Table of contents page is also know as Sitemap.Table of contents is one of the key factor for getting traffic for your blog or website.In table of contents all the posts written are shown in an order manner.

Through your sitemap one can get to know about your posts.So it is the source of traffic for your blog.The sitemap with atom or rss doesnt look attractive .A pro blogger named Akith Kumar Singla brought a unique and attractive design using Thumbnail in blogger.I applied it to my blog.

It looks like this:

click on it to enlarge

So lets come to the topic 

How To Create HTML Sitemap With Thumbnail?

Follow below steps to add this attractive table of content page in your blog.

1. Go to your blogger blog.


2. Now Navigate to Pages > New Page > Blank Page. (Note: You can create a post too instead of static page.)


3. Switch it to HTML mode.


4. Paste Below code in the body area.



<script src='https://bloggertipstricks.googlecode.com/files/bloggertipstricks.com-sitemap.js'>
</script>
<script style='text/javascript'>
var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
</script>
<script src="http://www.techlosoft.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>
<style type="text/css">
.sitemap-container {width: 100%; height: 105px; border-top: 2px solid #eee;}
.sitemap-container:hover {background-color:#fafafa;}
.thumbnail {width: 60px; height: 90px; float: left; top:0px;}
.posttitle {height: 90px; float: left; line-height: 90px; margin-left:25px; display:block; width:80%; white-space:nowrap;}
#postimg {margin-top: 10px;  -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 60px; border: 2px solid #eee;}
#list{list-style-type: none; padding-left: 0px; margin-left: 0px;}
</style>



5. Replace www.techlosoft.blogspot.com with your own blog URL.


6. Click on Publish button.


7. That's it.

Note: Above code will show posts from all the labels in your blog. You can replace it with below one to create sitemap page for a single label.

<script src='https://bloggertipstricks.googlecode.com/files/bloggertipstricks.com-sitemap.js'>
</script>
<script style='text/javascript'>
var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
</script>
<script src="http://www.techlosoft.blogspot.com/feeds/posts/default/-/Label%20Name?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>
<style type="text/css">
.sitemap-container {width: 100%; height: 105px; border-top: 2px solid #eee;}
.sitemap-container:hover {background-color:#fafafa;}
.thumbnail {width: 60px; height: 90px; float: left; top:0px;}
.posttitle {height: 90px; float: left; line-height: 90px; margin-left:25px; display:block; width:80%; white-space:nowrap;}
#postimg {margin-top: 10px;  -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 60px; border: 2px solid #eee;}
#list{list-style-type: none; padding-left: 0px; margin-left: 0px;}
</style>

Replace www.techlosoft.blogspot.com with your blog URL and Label%20Name with your label name.

Remember: If your label name consist more than one word, then don't forget to add %20 between each of them.

For example: Blogging Tips will be written as Blogging%20Tips.

The label name is case sensitive, so take care of it.