2 Awesome Sitemap Widgets for Blogger



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
2. Sitemap with Thumbnail for Blogger



Responsive Sitemap Widget for Blogger


This widget was coded by Chandeep of BlogTipsnTricks. 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. A live working demo can be seen by clicking the button below'



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="http://files.allbloggertricks.com/Scripts/sitemap.js" type='text/javascript'></script>
<script src="http://www.allbloggertricks.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<p style="display:none;"><a href="http://www.allbloggertricks.com/">All Blogger Trick</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


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.


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 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>

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.

53 comments:

  1. Table of content page is very essential to add in blog. It gives clear navigation to our readers to land on desire pages. Thanks Dhiraj bro for mentioning my widget here.

    ReplyDelete
  2. Welcome Ankit :D You have made a superb widget which will surely help all our readers. Thanks for commenting.

    ReplyDelete
  3. Thanks bro for your appreciation :)

    ReplyDelete

  4. Yes Dhiraj Barnwal Bro we have also implemented this widget on our blog. Really interesting and decrease bonus rate. Thanks and hope to see you with latest updates

    ReplyDelete
  5. not working on my blog. naijacinemas.blogspot.com

    ReplyDelete
    Replies
    1. Can I please see the URL of the post/page where you have added the above code.

      Delete
  6. Hi Dhiraj. I think you are doing an excellent job but with this feature I came up with the same problem as Progress above. I' ve looked for the js file, but it seems to be missing. Can you check it out please? Thank you in advance.

    ReplyDelete
    Replies
    1. Hi there. I checked out post the scripts and they were working absolutely fine well if the problem still continues do reply and tell me in which one of the above sitemap you have problem :)

      Delete
  7. Hi again. Thank you so much for the immediate response. Well, i' ve checked both. The second one with the rounded thumbnails works just fine. But i loved the first one. The problem seems to be the js file (https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js), whitch seems to be missing from its host. Your first demo, also, doesn't seem to be working either.

    ReplyDelete
    Replies
    1. Hi NukNuk ! Well the script is working fine for me. Nevertheless I have updated the js file. If the problem still continues don't hesitate to reply here.

      The new js file link is -> https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/sitemap.js

      Delete
  8. Hi Dhiraj. Well, I' m now able to trace the js file, but the problem continues on firefox. I use the Greek v.21 of firefox (that is the second most popular browser in Greece after google chrome). Everything ok on chrome v.27 and explorer v.9. I haven' tried it on safari and opera. Any ideas? Thanks once again for the quick response.

    ReplyDelete
    Replies
    1. Well I think that it is browser specific problem. The JS file is encrypted and the browser is unable to convert/decrypt it

      Delete
  9. Problem solved. My Eset NOD32 antivirus recognizes the js file as a trojan, so it quarantined it. Well, after some research on the web, i found out that this is a common problem for users of NOD32 antivirus. my research indicates that it' s a false positive alert. I hope this comment will help other users that face similar problems. Oh, i almost forgot. The claimed virus is JS/Kryptik.ALB.

    ReplyDelete
    Replies
    1. Wow ! Great Research. Thanks for your valuable comment, it will surely help my readers.

      Delete
  10. thank you very much.. was in search of this from many days...

    Thanks and Regards,
    UnlimitedSoftz

    ReplyDelete
  11. Oh Man!!! Thankyouuuuuuuuuuuuuuuuuuuu..........
    Thankyou for the lovly sitemap.It's lookin awesome on my blog - Hq Games World Thankx Again!!!!!!!

    ReplyDelete
  12. Just such an great sitemap! But how could I shorten the Titels that are ahown, if they are to long for it?

    ReplyDelete
  13. In the above code given in the post find <style> and paste the below given code just above it.

    [pre]
    .ct-columns-3 p a {
    font-size: 12px !important;
    }
    [/pre]

    ReplyDelete
    Replies
    1. It dnt wrk for blog having too many posts...my blog has more than 3500 posts,with 2000 hollywood movies,but it shows list of oly 372 hollywood movies...same with other titles ...why so??

      Delete
  14. Hey bro not working withe me .
    see this demo on this blog http://blogtemplatew.blogspot.in/ if you click on table of content then is refreshes the page only please help me with it !

    ReplyDelete
    Replies
    1. Because you haven't installed the page well. Please make a new page by clicking Blank Page option.

      Delete
  15. I am 500th facebook like member for your blogger

    ReplyDelete
  16. awesome sitemap widget i like it ...but site map number 2 is error

    ReplyDelete
  17. Thankyou for the tutorial. Both sitemap style look great, but I pick #2

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. i tried adding sitemap on my blog but i cannot see anything when i refreshed my page please can u explain me in detail how to do it ??

    ReplyDelete
  20. Good one. I tried and looks good.

    ReplyDelete
  21. nice one, superb widget

    ReplyDelete
  22. thank you, this is what I've been looking for My blog :D

    ReplyDelete
  23. Thanks very much, it worked perfectly for my blog

    ReplyDelete
  24. it's so cool bro, I like sitemap no.1 and I apply to my blog.

    ReplyDelete
  25. I tried adding 'Responsive Sitemap Widget for Blogger' to my blogger site MU Android APK Sitemap. But I don't know why it's not working for me! help please.

    ReplyDelete
  26. wow. Thank you so much . I have added & it looks awesome. Please check Sitemap of my site.

    ReplyDelete
  27. Thnks Man awesome dude.Nice Going continue the good work

    ReplyDelete
  28. Dear Sir,Thanks' for this awesome post.

    ReplyDelete
  29. Hello i cant view demo. My antivirus blocks it. I'm planning to add your widget to my blog @ http://bloggertemplatescloud.blogspot.com/

    ReplyDelete
  30. st resopinsive sitemap is not working.Only whitespace comes instead of posts.

    ReplyDelete
  31. thanks man como le quito el mensaje que me sale al final del widget...

    ReplyDelete
  32. Hi friend, thank you for this widget. I want to ask, how to make javascript numbers like that? I often make a widget, but sometimes a lot of other people who change the widget credit and do not appreciate the work of others. I want to make as small as a credit to the writing of your widgets, that are not easily changed. you can see here http://masterr-seo.blogspot.com/p/peta-situs.html. thank you

    ReplyDelete
  33. I used the responsive one on my site for almost a year, now suddenly it not working, Google help said that looks like the server is down that I need to contact the person I got the script from. So why I am posting here do you know if there is an issue going on with this script as to why suddenly stopped working?

    ReplyDelete
  34. Mine disappeared too but I just replaced the code with the code listed in this post and it came back.

    ReplyDelete
  35. I concern the code is clean with quality code????????

    ReplyDelete
  36. This is really very interesting and valuable post to make a lovable blog for readers eye. Thanks mate.

    ReplyDelete
  37. This comment has been removed by the author.

    ReplyDelete
  38. the two codes aren't working for me why is this check newsoga.com

    ReplyDelete
  39. Hello there admin, I have found that thumbnail one is not working. Please fix it I really need a custom sitemap which display which only display thumbnail with title for my blog - http://www.dailywallpapers.site/
    Thanks in advance brother.

    ReplyDelete
  40. Hello, I Noviar of Indonesia. I've learned to create a blog. Thank you, you have provided a useful lesson for me. Please give me your criticism of my blog. Sorry if my english is not good.

    ReplyDelete
  41. very good site and widgets i really abdicated to your blog
    http://afghanlibrary.blogspot.com/

    ReplyDelete