Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

How to add Cool Responsive Sitemap Widget for blogger blogs

On By // 80 comments
Advertisement
How to add Cool Responsive Sitemap Widget for blogger blogs
Most of the bloggers who has a blog on blogspot want to make a cool sitemap like WordPress, unfortunately the table of content/Sitemap widgets designed for blogger can't compete with WordPress sitemap. Few days ago we published a sitemap widget(by Ankit) but that's also not look much attractive and it can be only added for specific label. So, Today we're going to see how to add an stylish three column blogger sitemap with responsive design. This widget is easy to add and it has a cool look when compared to other sitemap widgets.
OK, you can see a live demo of the widget for better understanding.
Live Demo:-

How To Add Sitemap Widget to your blog

  1. In the blogger Dashboard, Select your blog
  2. Go to Pages >> New Page, then choose HTML Part
  3. Paste the following code inside it.
    <script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'></script>
    <script src="http://www.blogtipsntricks.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    <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 the above code. Replace http://www.blogtipsntricks.com with your blog link
  4. Then Click on the options on the right sidebar and select Don't allow, hide existing for Reader comments
  5. Now, Click publish and See the page.
  6. That's all, We are done.

I Hope you all like this widget Kindly Let me know your thoughts about the widget and don't forget to share it...

Happy Blogging :)

80 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. Hi Pawan,

      Thanks for using this widget. It's looking nice.

      To change the hover color search for the following CSS code in the widget and change the background color with the color you want. :)

      .ct-columns-3 p a:hover { background: #555; color: #fff; }

      Delete
    2. Thanks man for sharing such a vital widget like this !!

      Delete
  2. @Chandeep J changed the color. Now it looks perfectly. I have no any words to appreciate your words. Getting all the blog post in a page with stylish background is awesome. Loved it a lot.

    ReplyDelete
    Replies
    1. This is the best plugin till now I found on net for archive page and I'm using this to my blog.
      But one thing need to update on this is it should show one post once in the page because if I have applied five labels in a post than the same post is showing under five Labels.
      Is it possible to select only first or last label if applied more than one lable in a post for your script???

      Delete
  3. Good work Chan! Looks an excellent widget for Blogger.

    I have a question. What happens as I post new articles? Do I need to update this widget? Or, it gets updated automatically?

    ReplyDelete
    Replies
    1. Thanks Bro, Indeed It Is. :D

      You don't need to update the widget it'll automatically update when a new post is published. :)

      Delete
  4. Another question: Can I restrict the number of labels to be displayed? May be like only labels with more than 10 posts? Or, can I specify the labels list, only which to be displayed?

    ReplyDelete
    Replies
    1. Ohh Unfortunately, It's not possible In this widget But, I'll try to update this widget With This feature. :)

      Thanks...

      Delete
  5. Thanks Chan bro to reveal your trick of adding such a attractive and innovative sitemap. And again thanks to mention my post in this tutorial ^_^

    ReplyDelete
    Replies
    1. It's My pleasure Bro, Thanks for commenting :)

      Delete
  6. It's not working for me.it showing me blank page after click on that page

    ReplyDelete
    Replies
    1. ohh OK Kindly give me that page URL, I'll check it.

      Delete
    2. bro it's working now.thank you

      Delete
  7. good sitemap for blogger :D excellent!!

    ReplyDelete
  8. I like to use this for a single post .Or i need a table like the sitemap with rows ad columns distributed evenly for a post.Can you help me ?Awaiting for your reply..........

    ReplyDelete
  9. Gr8 work ! can i use it with selected labels..?
    if not, can you make it possible?

    ReplyDelete
  10. Thanx bro... Fitted in my blog perfectly.... Really well done and go on!!!

    ReplyDelete
  11. Chandeep, This tutorial is quite great. I have used similar widgets on some of my Blogger blogs. Unfortunately, this is coming at a time when I have decided to migrate most of my blogspot blogs to Wordpress.
    All the same, thanks for a nice job.

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

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

    ReplyDelete
  14. permission to use the widget sitemap bro, no one wanted me to ask what if the sitemap link when clicked opens in a new tab??? about - about what I add a script and how to put it thanks...

    please check ( http://variasiblogger.blogspot.com/2012/03/sitemap.html ) :D

    ADMIN "Variasi Blogger"

    ReplyDelete
  15. Thanks Admin u are awesome dude!

    ReplyDelete
  16. hi chandeep, i want ask you,how to make widget popular posts like your widget??

    ReplyDelete
    Replies
    1. That's a nice idea, will soon publish an article about it. Thanks :)

      Delete
  17. hi admin.

    i have created the sitemap page.

    http://www.carockers.org/p/sitemap_26.html

    i want to add this to google webmaster tools but it is not accepting, as it accepts only sitemaps in xml format. Whats the solution for this?

    thank you in advance

    ReplyDelete
    Replies
    1. yeah you can't submit this sitemap to Google. This sitemap widget is for readers not for search engine ;)

      To Submit it to Google you have to use a .xml sitemap or also you can submit your blog feed to Google

      Delete
  18. not working for this : http://thavmatropio-midea.blogspot.gr/
    Please can you tell me what is wrong?

    ReplyDelete
  19. Hey how you have provided that backlink in this widget to your website? i mean i cant find any code there but still it is showing a backlink

    ReplyDelete
  20. Thanks man I have applied it on my blog. I love it very much

    ReplyDelete
  21. Hey Chand, your template and scripts are being reported in avast as viruses (trj) please check it up!

    ReplyDelete
    Replies
    1. I checked it. but It seems fine for me. no virus found. if you still found error kindly contact me using contact page with a screenshot. :)

      Thanks

      Delete
  22. hi nice i love it , but can u help me if i need using this code in WordPress or gave me any thing to help me like this

    ReplyDelete
    Replies
    1. There are many sitemap plugins available for WordPress, Just Google it ;)

      Delete
  23. Please give script for specific labels and how can I reduce the amount of links to around 10 per label.

    ReplyDelete
    Replies
    1. Check this article :) http://www.blogtipsntricks.com/2013/04/how-to-create-sitemap-for-specific-label.html

      Delete
  24. why does sitemap temporaly working?, but thanx any way

    http://blogzipper.blogspot.com/

    ReplyDelete
    Replies
    1. I can't get you? It's working fine. :)

      P.S. don't use links in comments unless it's necessary

      Delete
  25. thank you very much!
    Theme of you have a lot of errors when testing HTML5 at http://validator.w3.org/
    You http://www.tuanphan.info/ please his site and for evaluation

    ReplyDelete
  26. Thank you very much..I am using your created theme and now this sitemap is also great. I am really appreciating your work. god bless you

    ReplyDelete
  27. sitemap nya keren bro
    thank you

    ReplyDelete
  28. I've applied it to my blog... really cool!!!
    Thanks mate.. cheers.. :)

    ReplyDelete
  29. Very nice theme you shared thank you ,

    ReplyDelete
  30. is there any way to change the box width? thank you :)

    http://indi-life.blogspot.com

    ReplyDelete
  31. Thanx for your work, Chandeep J! It's a very useful tool. In my case my blog is for Spanish speakers and would like to suggest you that it can be changed the word "New!" that appears next to the recent postings; specifically it might say "¡Nuevo!". Also, can borders be rounded?

    ReplyDelete
  32. This is great!
    Thank you!

    ReplyDelete
  33. Is it supposed to look like this http://sugaspiceeverythingnice.blogspot.sg/p/reviews.html ??

    ReplyDelete
  34. Thankyou bro! worked excellently in my blog. This is the only code i found after long search.
    You can check the sitemap of my blog here
    http://www.giga-one.com/p/sitemap.html

    ReplyDelete
  35. thanx chandeep for this awesome widget. Looks great!! works perfectly with my blog.

    ReplyDelete
  36. thanks for your tips, works 100% with my blog and I like this.

    ReplyDelete
  37. Very Nice article learned a lot about Blog. Thanks

    ReplyDelete
  38. can you teach me to make own sitemap on my host? like https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8 in your host

    ReplyDelete
  39. Thank you very much for this greatest sitemap.

    ReplyDelete
  40. why "Widget by blogtipsntricks" with a link ?

    ReplyDelete
  41. Its Showing Blank page please help me.

    ReplyDelete
  42. This is wonderful, and it looks great! Thank you.

    ReplyDelete
  43. Great help to bloggers. I'm using this on my blog, you can check it here:
    http://bloggingeasier.blogspot.com/p/sitemap.html

    I have something to share with everybody here is that the benifites of using this kind of sitemap page on blog. Hope you'll like it! Also please give you suggesions regarding it. You can read all about it here:
    "Improve Search Rank By Adding Sitemap Page To Your Blogger Blog"
    http://bloggingeasier.blogspot.com/2015/04/adding-sitemap-page.html

    ReplyDelete
  44. dear chandeep this is not working for my blog kindly help

    ReplyDelete
  45. Thanks Chandeep..It works in my blog www.futureentech.blogspot.in
    Great work. Excellent.

    ReplyDelete
  46. Thank you! I already install and worked excellently in my blog.

    ReplyDelete
  47. superv ! never seen before. I have a question , how frequently do i need to update sitemap on google search console ? If I add this widget , do i need to submit sitemap to google every time when i post new content ?

    ReplyDelete
    Replies
    1. Just submitting your sitemap to google webmaster tools is enough, it'll automatically update. :)

      Delete
  48. thank you chandeep, but how to change color 'NEW' label?

    ReplyDelete
  49. Thanks, It is working for me.

    ReplyDelete

  50. Thank you , on my blog is very interesting , what if I want to turn it into two columns friend ? :)

    ReplyDelete
  51. The javascript provided in the post is being blocked by antivirus. Can you please provide the updated java script..

    ReplyDelete
  52. I have always had this question, do sitemaps created prior to designing websites similar rather than the ones we create after hosting (not on a dynamic website). When planning the website initial design would be something like this in this sitemap examples

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep