How to add Cool Responsive Sitemap Widget for blogger blogs

With the help of Sitemap of a blog the search crawlers crawl the entire blog. Sitemap helps the search crawlers to index the blog content. 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. I am going to share a trick by which you can create a HTML sitemap for your blog readers so that they can easily select a post to read. If you use HTML sitemap in your blog wisely then you can increase your blog page rank also.

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.

Adding Cool Responsive Sitemap Widget for blogger blogs

<!-- Adding Cool Responsive Sitemap Widget for blogger blogs By Paktechnoz -->
<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<script src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" type="text/javascript"></script>
<script src="http://www.paktechnoz.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></div>

• Just Replace  "http://www.paktechnoz.com" with your website/blog url
• Then Click on the options on the right sidebar and select Don't allow, hide existing for Reader comments
• Now, Click publish and See the page.
• That's all, We are done