How to Add Attractive three column Sitemap Widget To Blog

 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://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" type='text/javascript'></script>
   <script src="http://www.crack4us.blogspot.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.crack4us.blogspot.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 :)