A Table of Contents Page is the basic need of a blog because it contains all the blog posts. It helps the visitor to check out all of our blog posts at a time. Basically it is has very simple and ugly look as links of our posts in every line but today we will bring a new and more eye catching table of contents page with post thumbnail. You can create this for all of your blog posts or for a specific label. It has very simple CSS coding so you can customize it easily according to your needs.
I know you want a preview before adding it to your blog so go ahead.

    How to create a Table of Contents With Thumbnails Page in Blogger:

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

    1. Go to your blogger blog.

 

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

 

    1. Switch it to HTML mode.

 

    1. Paste Below code in the body area.

 

<script src=’http://yourjavascript.com/91817580203/bloggerdevelopers-sitemap.js’>
</script>
<script style=’text/javascript’>
var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
</script>
<script src=”http://www.bloggerdevelopers.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>

 

    1. Replace www.bloggerdevelopers.com with your own blog URL.

 

    1. Click on Publish button.

 

  1. 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=’http://yourjavascript.com/91817580203/bloggerdevelopers-sitemap.js’>
</script>
<script style=’text/javascript’>
var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
</script>
<script src=”http://www.bloggerdevelopers.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.bloggerdevelopers.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: SEO Tips will be written as SEO%20Tips.

       Final Words!

So that’s the steps to create a Table of Contents Page with Thumbnails in Blogger. I hope you like this so please do it share with your friends and don’t forget to write your views in comments till then Peace, Blessings and Happy Blogging!