How to Add an HTML Sitemap Page in Blogger

Other than the about us, contact us pages, privacy policy on your blog, another important page that must be included in your blog is the HTML Sitemap page or table of contents page.

A Sitemap which can also be called table of contents provides an easy navigation for readers to easily view all the blog's post in one place, helps search crawlers to crawl the entire blog properly and also increases the crawling of a blog and its indexing rate.  Unlike the blog achieve, this page arranges your blog post according to their labels making it easy to go through them. In this post, i will show you how to create HTML Sitemap page in blogger. 

Adding an HTML Sitemap in your blogger blog can influence your blog's rank in search engines. Also, HTML Sitemap in a website creates a strong internal linking of the blog's pages which brings about a good search engine optimization.
Here is a Sitemap Demo

Now its time to create a Sitemap for your Blog
• Login to your Bloggers account
• Select the blog you want to edit
• Go to your blogger dashboard.
• Navigate to' Pages'.
• Click on  'New Page'.
• Switch to 'HTML' mode instead of Compose.
• Copy the code below and paste it inside the HTML editor.

<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.solutionville.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

• Replace the higlighted URL in yellow with your blog's URL
• Publish the page and you have successfully created an HTML sitemap page in Blogger for all Labels. Easy isn't it?