Sitemap with Thumbnails

2 Awesome Sitemap Widgets for Blogger

Posted On 22:09 // 47 comments

Adding Sitemap or Table of Contents in a blog is highly recommended for all the bloggers whether new or old. These Sitemaps help our readers to navigate our blog easily and it also helps our blog by decreasing its bounce rate (number of visits that consists of only one pageview). Two of my very good friends +Chandeep J and +Ankit Kumar Singla have worked on the Sitemap widget to make it more attractive.




The two Sitemap Widgets are -

1. Responsive Sitemap Widget for Blogger (Table of Contents σε προηγούμενη ανάρτηση)
2. Sitemap with Thumbnail for Blogger

Sitemap with Thumbnail for Blogger

Ankit Singla of BloggerTipsTricks too coded the Sitemap widget and added rounded thumbnails to it. This sitemap widget looks simple, clean and elegant too. 
To add this Sitemap widget in your blog just follow the below instructions.

Go to Blog Title → Page → New Page → Blank Page → HTML and paste the below given code in the post editor.

<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.bloggertipstricks.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>
<p style="display:none;"><a href="http://www.allbloggertricks.com/">All Blogger Trick</a></p>
<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>

After adding change the URL in red bold with your blog URL. After that Publish the page and you would be able to see this elegant sitemap on your blog

You are done now. You may choose any of the two awesome sitemaps as per your choice. These sitemaps will surely help your readers to navigate your site more easily.

http://www.allbloggertricks.com/2013/06/2-awesome-sitemap-widgets-for-blogger.html