Sitemap For Blogger

Sitemap page is not much necessary for blogs but from some sides it's better to have a sitemap page in menu. Sitemap page basically helps you to make the navigation easier and it also improves page rank of our blog due to make internal linking of our blog. Yeah! That's awesome thing to improve internal linking because in that page, you'll see all the published posts on your blog. Other than this, it also helps search engine's crawler to index the content and webpage easier. So, in this post we're going to share this sitemap page for blogger.

Sitemap Page - How It Works

Before we get started in doing tweaks with our blog for implementing that sitemap page, I would like to describe you that how it works actually or in other words, I'm going to explain it's feature in this passage. First of all, This is neat and clean sitemap page which is well coded specially for blogger blogs. It's color scheme is only blue which you can see in the demo page. This is automated sitemap page which automatically adds the latest posts in itself without touching it so it's even better for us that we don't need to touch it just after implementing in blog, it will do all the task itself. In this sitemap page, you can see that posts are categorized by labels which is better for readers that they can find the things in that page easily. This sitemap page is developed with JavaScript and CSS which actually takes the post links of our blog through Feeds of our blog. This is created by Abu Farhan so all the credits goes to them.

Create Sitemap Page in Blogger

Don't worry buddy! You might be thinking that it will be little tough to implement this kind of page in blogger but that's not true as you're thinking! Though, It's the most easiest task to insert this in our blogs. Just follow the simple steps given below.
  • Go To Blogger >> Dashboard >> Pages 
  • Create New Page >> Blank Page
  • Insert Page Title of Yours Choice.
  • Go To HTML Tab
  • Copy The Code Below and Paste There in The HTML Tab.
<style type="text/css">
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);
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;
-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{
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;


<div id="toc">
<script src="" type="text/javascript"></script>
<script src=";alt=json-in-script&amp;callback=loadtoc">
  • Replace YOURBLOGDOMAIN With Your Blog Domain.
  • Click "Publish" Button.
  • That's it! 

Final Words

Next Post »

Leave your comment please! ConversionConversion EmoticonEmoticon