2 Awesome Sitemap Widgets for Blogger

Dhiraj Barnwal Thursday, 13 June 2013 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; } }
</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.
Labels:
Google+ Pinterest

53 Comments to 2 Awesome Sitemap Widgets for Blogger Post Yours! Read Comment Policy ▼

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.

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

Thanks bro for your appreciation :)


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

not working on my blog. naijacinemas.blogspot.com

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

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.

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

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.

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

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.

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

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.

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

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

Thanks and Regards,
UnlimitedSoftz

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

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

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]

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 !

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

I am 500th facebook like member for your blogger

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

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

This comment has been removed by the author.

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

Good one. I tried and looks good.

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

Thanks very much, it worked perfectly for my blog

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

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.

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

Thnks Man awesome dude.Nice Going continue the good work

Dear Sir,Thanks' for this awesome post.

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

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

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

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

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

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?

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

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

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

This comment has been removed by the author.

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

is not working in my blog, please

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.

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.

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