Thursday, 17 October 2013

Premium 3 Column Sitemap Widgets with Thumb for Blogger with Customisations

This widget is a modified and improved version of 2 Awesome Sitemap Widgets for Blogger published by allbloggertricks.com is highly recommended for all the bloggers. These Sitemaps help your readers to navigate our blog easily and it also helps your blog by decreasing its bounce rate (number of visits that consists of only one pageview). Two friends of author of allbloggertrick +Chandeep J and +Ankit Kumar Singla also have worked on the Sitemap widget to make it more attractive.

Sitemap with Thumbnail with 3 Column + Premium Border

Ankit Singla of BloggerTipsTricks too coded the Sitemap widget and added rounded thumbnails to it. This sitemap widget looks simple, clean and elegant too. A live working demo of the same can be seen by clicking the below button.

Live Demo

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.

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

Once you have seen the demo, to add this widget follow the above given steps but inspite of adding that code add the below given code.

<script src="https://bloggertipstricks.googlecode.com/files/bloggertipstricks.com-sitemap.js">
</script>
<script>
var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
</script>
<script src="http://www.widgetsbay.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent&max-results=999"></script>
<br />
<div style="display: none;">
<a href="http://www.allbloggertricks.com/">All Blogger Trick</a></div>
<style type="text/css">
.sitemap-container {margin: 5px;background-color:#fff;box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);border: 1px solid #eee; border-radius: 0px;float:left;width: 32.0%; height: 90px;}
.sitemap-container:hover {background-color:#fafafa;}
.thumbnail {width: 70px; height: 90px; float: left; top:0px;}
.posttitle {height: 90px; line-height: 15px; margin-left:30px; display:block; width:66%;overflow:hidden;}
#postimg { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 10px; width: 70px;height:90px; border: 2px solid #eee;}
.postimg:hover { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 10px; width:240px;height:320px; border: 2px solid #eee;}
#list{list-style-type: none; padding-left: 0px; margin-left: 0px;}
</style>

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.

Now it's time for Customisations

<<<<<****************************************************************>>>>>

We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget,

<<<<<****************************************************************>>>>>