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 :)
Like This Post? Please share!
Subscribe to Blogtipsntricks by email and get Free updates

You May Also Like...

80 comments:

  1. Pawan Paudel26 May 2013 at 21:34

    This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. Chandeep J26 May 2013 at 21:39

      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. Finddel Travel Africa11 April 2014 at 06:21

      Thanks man for sharing such a vital widget like this !!

      Delete
  2. Pawan Paudel27 May 2013 at 07:59

    @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. Chandeep J27 May 2013 at 09:44

      Thanks. :)

      Delete
    2. Hinditracks31 October 2014 at 08:46

      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. Manickavel Arumugam27 May 2013 at 09:35

    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. Chandeep J27 May 2013 at 09:55

      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
    2. Manickavel Arumugam27 May 2013 at 09:57

      That's great. Thanks Chan.

      Delete
  4. Manickavel Arumugam27 May 2013 at 09:40

    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. Chandeep J27 May 2013 at 09:58

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

      Thanks...

      Delete
    2. Manickavel Arumugam27 May 2013 at 10:00

      Appreciate that! Thanks.

      Delete
  5. Chandeep J27 May 2013 at 09:47

    My Pleasure :)

    ReplyDelete
  6. Chandeep J27 May 2013 at 10:50

    Thanks :)

    ReplyDelete
  7. Ankit Singla27 May 2013 at 13:52

    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. Chandeep J27 May 2013 at 19:44

      It's My pleasure Bro, Thanks for commenting :)

      Delete
  8. Anonymous27 May 2013 at 16:31

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

    ReplyDelete
    Replies
    1. Chandeep J27 May 2013 at 19:45

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

      Delete
    2. Anonymous3 June 2013 at 23:11

      bro it's working now.thank you

      Delete
  9. Unknown28 May 2013 at 09:05

    good sitemap for blogger :D excellent!!

    ReplyDelete
  10. kang olis28 May 2013 at 12:23

    good sitemap.thank

    ReplyDelete
  11. we28 May 2013 at 13:27

    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
  12. Mandar Deshpande28 May 2013 at 15:22

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

    ReplyDelete
  13. The Sneeze28 May 2013 at 20:30

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

    ReplyDelete
  14. Unknown3 June 2013 at 23:49

    In spanish please!

    ReplyDelete
  15. Efoghor Joseph Ezie11 June 2013 at 21:16

    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
  16. Fashion Freak25 June 2013 at 13:57

    This comment has been removed by the author.

    ReplyDelete
  17. Unknown29 June 2013 at 00:19

    This comment has been removed by the author.

    ReplyDelete
  18. Belajar SEO14 July 2013 at 20:40

    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
  19. Unknown24 July 2013 at 11:10

    Thanks Admin u are awesome dude!

    ReplyDelete
  20. Unknown31 July 2013 at 23:54

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

    ReplyDelete
    Replies
    1. Chandeep J2 August 2013 at 13:26

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

      Delete
  21. dvzxv26 August 2013 at 15:28

    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. Chandeep J30 September 2013 at 10:38

      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
  22. Mohamed Shimran13 September 2013 at 12:06

    annaaa super widget

    ReplyDelete
  23. Fajar3 November 2013 at 12:38

    Cool bro, I'll try :D

    ReplyDelete
  24. thavmatropio6 December 2013 at 19:36

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

    ReplyDelete
  25. Unknown9 January 2014 at 20:23

    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
  26. Muhar14 January 2014 at 23:17

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

    ReplyDelete
  27. Guillermo24 February 2014 at 23:46

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

    ReplyDelete
    Replies
    1. Chandeep J25 March 2014 at 10:16

      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
  28. hussein9 March 2014 at 02:05

    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. Chandeep J25 March 2014 at 10:14

      There are many sitemap plugins available for WordPress, Just Google it ;)

      Delete
  29. Abhishek Kumar12 April 2014 at 17:59

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

    ReplyDelete
    Replies
    1. Chandeep J24 April 2014 at 13:50

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

      Delete
  30. Unknown24 April 2014 at 13:24

    why does sitemap temporaly working?, but thanx any way

    http://blogzipper.blogspot.com/

    ReplyDelete
    Replies
    1. Chandeep J24 April 2014 at 13:53

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

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

      Delete
  31. Unknown11 June 2014 at 20:16

    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
  32. Unknown12 June 2014 at 19:13

    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
  33. Bahar Ulum18 June 2014 at 10:41

    sitemap nya keren bro
    thank you

    ReplyDelete
  34. Khir Khalid4 July 2014 at 21:03

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

    ReplyDelete
  35. Unknown29 July 2014 at 09:32

    Very nice theme you shared thank you ,

    ReplyDelete
  36. Mike29 August 2014 at 22:01

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

    http://indi-life.blogspot.com

    ReplyDelete
  37. Martin4 September 2014 at 05:01

    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
  38. Anonymous5 November 2014 at 04:49

    This is great!
    Thank you!

    ReplyDelete
  39. Sugar and Spice17 December 2014 at 21:41

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

    ReplyDelete
  40. Aravind Nair31 December 2014 at 15:07

    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
  41. Gokul2 January 2015 at 17:42

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

    ReplyDelete
  42. Allegiance Zamzam26 January 2015 at 08:56

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

    ReplyDelete
  43. Anonymous2 February 2015 at 21:25

    Very Nice article learned a lot about Blog. Thanks

    ReplyDelete
  44. RN ABU DARDA UBA17 February 2015 at 14:15

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

    ReplyDelete
  45. O21 February 2015 at 11:14

    Thank you very much for this greatest sitemap.

    ReplyDelete
  46. piza3 March 2015 at 21:13

    thanks for the tips. ^^

    ReplyDelete
  47. Unknown6 March 2015 at 06:32

    why "Widget by blogtipsntricks" with a link ?

    ReplyDelete
  48. Unknown8 March 2015 at 21:20

    Its Showing Blank page please help me.

    ReplyDelete
  49. Marie Beausoleil3 April 2015 at 20:41

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

    ReplyDelete
  50. Naman16 April 2015 at 16:35

    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
  51. Diptim29 April 2015 at 11:40

    Great

    ReplyDelete
  52. Arvind4 May 2015 at 00:09

    dear chandeep this is not working for my blog kindly help

    ReplyDelete
  53. Kamlesh Jolapara7 May 2015 at 11:36

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

    ReplyDelete
  54. Loja Casinha Feliz20 July 2015 at 18:39

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

    ReplyDelete
  55. Subhradeep Biswas29 September 2015 at 19:38

    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. Chandeep J8 October 2015 at 14:46

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

      Delete
  56. info-geospasial19 December 2015 at 11:24

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

    ReplyDelete
  57. david simon22 January 2016 at 17:15

    thanks sir

    ReplyDelete
  58. Unknown14 February 2016 at 18:24

    Thanks, It is working for me.

    ReplyDelete
  59. Nino Artikel17 April 2016 at 21:47


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

    ReplyDelete
  60. Nisheeth Ranjan22 June 2016 at 12:48

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

    ReplyDelete
  61. Evan15 July 2016 at 22:24

    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