Cool Responsive Sitemap Widget for Blogger-How to Guide

Many of earlier bloggers want to add site map page in their blogs but they can’t know about it. In this modern age of blogging some blogger developers made a cool Sitemap page widget for blogger. It is similar to Wordpress Sitemap page. It is too cool, stylish and attractive having new features. It is easily to add in blogger. After adding CSS code you need to just change blogger URL with your own blog URL .It has cool and look and different from other sitemaps. It has three column and Tabled sitemap designed for blogger.

Demo

How to create Responsive Sitemap Page in BLogger

Step 1: Go to blogger Dashboard.

Step 2: Select "Pages" Section and then click on "New Page" and create a New "Blank Page"

Step 3: Paste the following HTML code in this new page "HTML Section"

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

Step 4: After adding code.Now Replace my "Blogger URL" with your own "Blogger URL"

Step 5: After this Select Option button from middle right side and select "Don't allow, hide existing" for Comment Readers 

Now publish your Page and View your Sitemap Page