2 Awesome Sitemap Widgets for Blogger

Posted On // 53 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
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; } }

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 style='text/javascript'>
var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
<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;}

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.


13 June 2013 at 12:12

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.

13 June 2013 at 12:24

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

13 June 2013 at 20:43

Thanks bro for your appreciation :)

Hafeez Khan Author
14 June 2013 at 02:34

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

Progress Author
16 June 2013 at 21:43

not working on my blog. naijacinemas.blogspot.com

17 June 2013 at 13:19

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

ΝικΝικ Author
22 June 2013 at 09:42

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.

22 June 2013 at 13:33

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

ΝικΝικ Author
22 June 2013 at 15:03

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.

23 June 2013 at 09:06

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

ΝικΝικ Author
23 June 2013 at 11:28

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.

23 June 2013 at 11:50

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

ΝικΝικ Author
23 June 2013 at 12:15

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.

24 June 2013 at 14:31

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

26 June 2013 at 11:55

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

Thanks and Regards,

jaimin patel Author
17 July 2013 at 09:11


7 August 2013 at 16:08

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

Babs Author
14 August 2013 at 01:21

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

14 August 2013 at 16:34

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

.ct-columns-3 p a {
font-size: 12px !important;

22 August 2013 at 19:47

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 !

24 August 2013 at 12:45

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

Santosh Gupta Author
5 September 2013 at 23:01

I am 500th facebook like member for your blogger

15 September 2013 at 11:33

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

Dean Author
27 September 2013 at 03:33

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

4 October 2013 at 06:53
This comment has been removed by the author.
4 October 2013 at 16:57

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

Santosh Author
28 October 2013 at 18:06

Good one. I tried and looks good.

Kiki Dee Author
30 October 2013 at 22:24

nice one, superb widget

M JF Author
3 November 2013 at 09:36

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

16 November 2013 at 19:25

Thanks very much, it worked perfectly for my blog

9 December 2013 at 03:17

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

Sebin Thomas Author
9 December 2013 at 19:35

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.

Rosy Razia Author
19 December 2013 at 18:04

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

2 January 2014 at 14:46

Thnks Man awesome dude.Nice Going continue the good work

atiqur rahman Author
6 January 2014 at 10:57

Dear Sir,Thanks' for this awesome post.

21 February 2014 at 09:58

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

kumar deepak Author
13 March 2014 at 23:21

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

20 March 2014 at 17:59

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

Nitro Sonic Author
28 April 2014 at 14:06

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

19 June 2014 at 23:14

Thank You Very Much

aulia Author
20 June 2014 at 20:05

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

Deanna Samaan Author
9 July 2014 at 06:16

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?

Mulluane Author
15 July 2014 at 13:17

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

Kuth Chi Author
4 January 2015 at 09:49

I concern the code is clean with quality code????????

21 January 2015 at 20:29

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

John Greg Author
29 March 2015 at 04:58
This comment has been removed by the author.
money Flex Author
22 August 2015 at 19:10

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

13 November 2015 at 15:20

is not working in my blog, please

Tech Dude Author
23 February 2016 at 11:25

thanks for the post, i'm new in blogger sitemap

Rahul kumar Author
9 August 2016 at 23:35

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.

Noviar Author
2 October 2016 at 15:12

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.

Water Fall Author
10 October 2016 at 15:47

very good site and widgets i really abdicated to your blog

agen bola Author
17 December 2016 at 16:53

thank you for this bro


Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| 2 Awesome Sitemap Widgets for Blogger |