How to create sitemap page in blogspot blog

I have already shared 1-2 articles about sitemap in my older posts and today in this article i am going to write a tutorial about the same sitemap topic but its different sitemap widget which not much necessary for blog but in other view its better to have installed in your blog. one of the best advantage of adding sitemap page to your blog is it will make the navigation easier and also it will help to improve SEO. How it can be helpful in improving SEO ? Well, this sitemap page will automatically add your all recent post with its labels So, thus it will help search engine's spider to crawler your all posts and it will index content and webpage easily, other than this it also helps to increase pagerank of your blog because it creates numbers of internal links.

Well, I have also installed sitemap page in this blog, You can see how actually it works and looks before implementing in your blog :)

Related : Blogger XML Sitemap Generator

How to create sitemap page in blogger?

To create sitemap page in blogger, first thing you will need to create a page that you can do by navigate from your blogger dashboard to Pages then click "New page" option then Page Editor will be open. turn it to HTML mode and place following code just inside it.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>

<div id="toc">
<script src="http://makingdifferent.github.io/blogger-widgets/sitemappage.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>

After adding above code inside page editor, Replace "http://www.YourBlogURL.com" with URL of your blog. And finally, Click "Publish" button and you're done !

That's it , If you have any problem while implementing sitemap page in your blog, Please drop your comment below and also share your views about it. Do share this post with your blogger friends if you really like this and going to use on your blog. Thanks !