Top 2 Attractive Sitemap Widgets for Blogger

In here I teach you how to add a site map to your blog.Adding Sitemap or Table of Contents in a blog is highly recommended for all the bloggers whether new or old. Sitemaps help readers to navigate our blog easily and it also helps our blog by decreasing its bounce rate and if it has categorized our article readers can easilly select articles what they want. I have show two types of site maps here.

The two Sitemap Widgets are 

1. Responsive Sitemap Widget for Blogger
2. Sitemap with Thumbnail for Blogger

Responsive Sitemap Widget for Blogger

This sitemap widget is responsive and can be used more or less in every blogger template without any big issue. The widget looks attractive and is eye catching too. 

To add this Sitemap widget in your blog just follow the below instructions.

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

CSS Codes:

  <script src="http://files.allbloggertricks.com/Scripts/sitemap.js" type='text/javascript'></script> <script src="http://amazingtricksforblogger.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> <p style="display:none;"> <a href="http://amazingtricksforblogger.blogspot.com/">Amazing Tricks For Blogger</a></p> <style type="text/css"> .post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; } .post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; } .ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;} .ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; } .ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; } .ct-columns-3 p a:hover { background: #555; color: #fff; } @media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } } </style>

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.

Sitemap with Thumbnail for Blogger

This Sitemap widget added rounded thumbnails to it and it looks simple, clean and elegant too. To add this widget follow the above given steps but inspite of adding that code add the below given code.

CSS Codes:
  <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://amazingtricksforblogger.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent&max-results=999"></script> <p style="display:none;"> <a href="http://amazingtricksforblogger.blogspot.com/">Amazing Tricks For Blogger</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>

Now you are done. 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.