How to Create Auto Updatable HTML Sitemap Page in Blogger

HTML sitemap is an important part of your Blogger (Blogspot) blog. Sitemap is a list of pages (links) on your website or blog. Auto Updatable HTML Sitemap show your blog reader to latest post update from different categories in your blog. In this post I will show you How To Create Auto Updatable HTML Sitemap Page in Blogger easily.

How To Create Auto Updatable HTML Sitemap Page in Blogger

To create Updatable HTML Sitemap Page in Blogger you have to need follow below steps..

1. First login to your Blogger Account.
2. Now go to "Pages" and Select "Blank Page" from "New page" option.

3. Select HTML page create option.
4. Write a Title "Sitemap" on your blank page title box.

5. Copy and paste below code on text area. { To copy code Just Click < > on Right Side}

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

6. Replace http://blogbeginnerguide.blogspot.com on your blog URL.
7. Publish your page and you are Done.

I think this post How to create auto updatable HTML sitemap page in blogger will help you to add an HTML sitemap on your Blogspot Blog.