How To Create and Add Sitemap Page in Blogger

In previous tutorial, I have shown you how to submit sitemap XML to google search engine, and in this post I will show you how to create sitemap page in Blogger.

What is Sitemap Page?

In simple language site map quickly guides search robots by telling them the number of pages that your website has and provide links to index the content they contain. Submitting a site map is one time process and after that you don’t need to submit it again.

Advantage of using Sitemap Page

• A greate benefit is that wheneveris that whenever your reader comes back to your blog and they want to access some post and are unable to find, then they would easily scroll through your sitemap and find their desired one instead of navigating through the pages to pages. This way you are pleasing to both readers and crawler
• Main feature of this sitemap page is that it differentiates post according to their labels or categories. Apart from this you can easily find a new post tag associated with newly posted ads. So if you have missed new post go through sitemap and look at new tag.
• This sitemap update and add new content and pages itself to it as it catch it from blog feed so make sure you have enables your feeds.

How to create sitemap page

Step 1: Go to Blogger Dashboard >> Page

Step 2: Create New Page and Insert Page Tittle of your choice

Step 3: Go to HTML tab and past the code below

<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>

<br />
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://YOUR OWN BlOG.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Note: In the red color, you have to replace with your own blog address.

Now, you are done!

Enjoyed this post?
Be sure to subscribe to get regular updates delivered to your email inbox, for free.