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

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