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.
Remember: If your label name consist more than one word, then don't forget to add %20 between each of them.
The label name is case sensitive, so take care of it.
- Go to your blogger blog.
- Now Navigate to Pages > New Page > Blank Page. (Note: You can create a post too instead of static page.)
- Switch it to HTML mode.
- Paste Below code in the body area.
- Replace www.techlosoft.blogspot.com with your own blog URL.
- Click on Publish button.
- That's it.
<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&alt=json-in-script&callback=recent&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>
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'>Replace www.techlosoft.blogspot.com with your blog URL and Label%20Name with your label name.
</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&alt=json-in-script&callback=recent&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>
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.
