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&alt=json-in-script&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&alt=json-in-script&callback=recent&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.
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.
ReplyDeleteWelcome Ankit :D You have made a superb widget which will surely help all our readers. Thanks for commenting.
ReplyDeleteThanks bro for your appreciation :)
ReplyDelete
ReplyDeleteYes 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
ReplyDeleteCan I please see the URL of the post/page where you have added the above code.
DeleteHi 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.
ReplyDeleteHi 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 :)
DeleteHi 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.
ReplyDeleteHi 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.
DeleteThe 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.
ReplyDeleteWell I think that it is browser specific problem. The JS file is encrypted and the browser is unable to convert/decrypt it
DeleteProblem 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.
ReplyDeleteWow ! Great Research. Thanks for your valuable comment, it will surely help my readers.
Deletethank you very much.. was in search of this from many days...
ReplyDeleteThanks and Regards,
UnlimitedSoftz
tHANKS.......
ReplyDeleteOh Man!!! Thankyouuuuuuuuuuuuuuuuuuuu..........
ReplyDeleteThankyou 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?
ReplyDeleteIn the above code given in the post find <style> and paste the below given code just above it.
ReplyDelete[pre]
.ct-columns-3 p a {
font-size: 12px !important;
}
[/pre]
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??
DeleteHey bro not working withe me .
ReplyDeletesee 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.
DeleteI am 500th facebook like member for your blogger
ReplyDeleteawesome sitemap widget i like it ...but site map number 2 is error
ReplyDeleteThankyou for the tutorial. Both sitemap style look great, but I pick #2
ReplyDeleteThis comment has been removed by the author.
ReplyDeletei 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 ??
ReplyDeleteGood one. I tried and looks good.
ReplyDeletenice one, superb widget
ReplyDeletethank you, this is what I've been looking for My blog :D
ReplyDeleteThanks very much, it worked perfectly for my blog
ReplyDeleteit's so cool bro, I like sitemap no.1 and I apply to my blog.
ReplyDeleteI 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.
ReplyDeletewow. Thank you so much . I have added & it looks awesome. Please check Sitemap of my site.
ReplyDeleteThnks Man awesome dude.Nice Going continue the good work
ReplyDeleteDear Sir,Thanks' for this awesome post.
ReplyDeleteHello i cant view demo. My antivirus blocks it. I'm planning to add your widget to my blog @ http://bloggertemplatescloud.blogspot.com/
ReplyDeletest resopinsive sitemap is not working.Only whitespace comes instead of posts.
ReplyDeletethanks man como le quito el mensaje que me sale al final del widget...
ReplyDeleteThank You Very Much
ReplyDeleteI 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?
ReplyDeleteMine disappeared too but I just replaced the code with the code listed in this post and it came back.
ReplyDeleteI concern the code is clean with quality code????????
ReplyDeleteThis is really very interesting and valuable post to make a lovable blog for readers eye. Thanks mate.
ReplyDeleteThis comment has been removed by the author.
ReplyDeletethe two codes aren't working for me why is this check newsoga.com
ReplyDeleteis not working in my blog, please
ReplyDeletethanks for the post, i'm new in blogger sitemap
ReplyDeleteHello 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/
ReplyDeleteThanks 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.
ReplyDeletevery good site and widgets i really abdicated to your blog
ReplyDeletehttp://afghanlibrary.blogspot.com/
thank you for this bro
ReplyDelete