How To Create Sitemap Page For Your Blog

Sitemap is a list of all the pages and posts in your blog which is easily accessible to web crawlers, from where they access all the information form your blog and show it up in search results.
For eg. If I Googled How To Create A 3D Painting then Crawlers of Google Search Engine will first crawl all those sites which have Submitted their sitemap to Google Webmaster, then it will fetch the results from various blog-page and web-pages and show it up in search results.

Adding a sitemap Page to your blog will allow your readers to track the particular page.

Here is a sitemap page

■ Open Blog Dashboard → Pages → Blank Page
■ Open HTML editor and select all the codes in HTML Editor, then paste the below given code in it.

HTML & CSS

<div dir="ltr" style="text-align: left;" trbidi="on">

<style type="text/css">
.post a {display: none;}
.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 {text-align:left; 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 #CCC; 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;text-decoration:none }
@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>

<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/sitemap.js" type="text/javascript"></script>
<script src="http://www.Yourblogurl.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

■ Replace www.Yourblogurl.com with your Blogurl.

Hope you liked this tutorial. I have tried to present it in a very easy manner so that you may not get confused while installing this widget. Even if there remains any doubt in your head then feel free to ask me leaving your comments.