How to Create Sitemap Page in Blogspot Blog

Sitemap Page in blogger is not necessary but it makes your blog more professional.Sitemap page makes meny navigation easier and help to improve your pagerank due to internal linking.In sitemap page readers can easily find any post according to its label or catagory.Sitemap page also helps crawlers to crawl and index your site easily.Here i am sharing html code responsible for the sitemap page.You do not need to add any label or catagory, or any type of posts list.It is only in blue colour.To add a sitemap page in blogger, you should add code in a new page as mentioned below.Do not forget to name your page as sitemap.

Before continue to full tutorial, you can see a demo of sitemap page.

Click Here to view Demo

Create Sitemap Page in Blogger Blogspot

To create a sitemap page in blogger blogspot blog, just follow the given steps listed below.

• Go to Blogger >> Dashboard >> Pages.
• Create new page as sitemap.
• Go to HTML Tab.

Now copy the following code and paste in HTML Tab of your page.

<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="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.YOURBLOGDOMAIN.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Now replace YOURBLOGDOMAIN with your own blog domain name.
Publlish your page, Now you are done!


Last Words

At the last i want to say that sitemap page makes your meny more powerful and your readers also will appreciate it.If you are facing any problen during implementing of this page in your blog, feel free to comment below or contact us.We are waiting to hear some suggestions and tips from you.