2 Awesome Sitemap Widgets for Blogger

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

50 comments

12 June 2013 at 23:42

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.

Reply
12 June 2013 at 23:54

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

Reply
13 June 2013 at 08:13

Thanks bro for your appreciation :)

Reply
Hafeez Khan Author
13 June 2013 at 14:04


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

Reply
Progress Author
16 June 2013 at 09:13

not working on my blog. naijacinemas.blogspot.com

Reply
17 June 2013 at 00:49

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

Reply
ΝικΝικ Author
21 June 2013 at 21:12

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.

Reply
22 June 2013 at 01:03

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

Reply
ΝικΝικ Author
22 June 2013 at 02:33

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.

Reply
22 June 2013 at 20:36

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

Reply
ΝικΝικ Author
22 June 2013 at 22:58

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.

Reply
22 June 2013 at 23:20

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

Reply
ΝικΝικ Author
22 June 2013 at 23:45

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.

Reply
24 June 2013 at 02:01

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

Reply
25 June 2013 at 23:25

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

Thanks and Regards,
UnlimitedSoftz

Reply
jaimin patel Author
16 July 2013 at 20:41

tHANKS.......

Reply
7 August 2013 at 03:38

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

Reply
Babs Author
13 August 2013 at 12:51

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

Reply
14 August 2013 at 04:04

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]

Reply
SPARSH JAIN Author
22 August 2013 at 07:17

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 !

Reply
24 August 2013 at 00:15

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

Reply
Santosh Gupta Author
5 September 2013 at 10:31

I am 500th facebook like member for your blogger

Reply
14 September 2013 at 23:03

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

Reply
Dean Author
26 September 2013 at 15:03

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

Reply
3 October 2013 at 18:23
This comment has been removed by the author.
4 October 2013 at 04:27

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

Reply
Santosh Author
28 October 2013 at 05:36

Good one. I tried and looks good.

Reply
Kiki Dee Author
30 October 2013 at 09:54

nice one, superb widget

Reply
M JF Author
2 November 2013 at 21:06

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

Reply
16 November 2013 at 05:55

Thanks very much, it worked perfectly for my blog

Reply
8 December 2013 at 13:47

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

Reply
Sebin Thomas Author
9 December 2013 at 06:05

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.

Reply
Rosy Razia Author
19 December 2013 at 04:34

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

Reply
2 January 2014 at 01:16

Thnks Man awesome dude.Nice Going continue the good work

Reply
atiqur rahman Author
5 January 2014 at 21:27

Dear Sir,Thanks' for this awesome post.

Reply
20 February 2014 at 20:28

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

Reply
kumar deepak Author
13 March 2014 at 10:51

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

Reply
20 March 2014 at 05:29

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

Reply
Nitro Sonic Author
28 April 2014 at 01:36

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

Reply
19 June 2014 at 10:44

Thank You Very Much

Reply
aulia Author
20 June 2014 at 07:35

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

Reply
Deanna Samaan Author
8 July 2014 at 17:46

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?

Reply
Mulluane Author
15 July 2014 at 00:47

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

Reply
Kuth Chi Author
3 January 2015 at 20:19

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

Reply
21 January 2015 at 06:59

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

Reply
John Greg Author
28 March 2015 at 16:28
This comment has been removed by the author.
money Flex Author
22 August 2015 at 06:40

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

Reply
13 November 2015 at 01:50

is not working in my blog, please

Reply
Tech Dude Author
22 February 2016 at 21:55

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

Reply
Rahul kumar Author
9 August 2016 at 11:05

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.

Reply

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 |