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&alt=json-in-script&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 !