HTML Sitemap for Blogger with auto update feature

Tweet

Generally, there are two types of sitemap one is XML which is just a bunch of codes understandable only by search engine bots and crawlers and another is HTML which is mainly for the users/visitors of the blog or website. HTML sitemap presents the complete structure of the blog to your visitors. It basically shows all the posts of your blog in a single static page thus, making it convenient for your user to navigate through your blog.

Also, while going through link building phase of your blog, if you can get links from high PR sites to your sitemap page then all of the posts in your blog will be fed the link juice. If you have lots of posts , then this is the best way to spread the link juice throughout your blog.

The step I'm going to show is how you can add a HTML sitemap which will automatically update itself as you keep on posting new comments. Check out my sitemap page to see what I'm talking about.

To add this feature to your blogger blog simply go to your blogger dashboard.

>> Create a new static page and paste the following code in it in the HTML Mode.

<style type="text/css">
#toc{
width:98%;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);
}
.toc-header-col1, .toc-header-col2 {
  background: #055A85;
  color: #ffffff;
  padding-left: 5px;
  width:525px;
}
.toc-header-col1 a{color:#fff;font-weight:bold;}
.toc-header-col2 a{color:#fff;font-weight:bold;}
.toc-header-col2 { 
  width:85px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited{
  font-size:12px;
  text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover {
  font-size:12px;
  text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2{
  padding-left: 5px;
  font-size:15px;
}
.toc-entry-col1 li{border-bottom:#ddd 1px dotted;margin-right:5px }
.toc-entry-col2 li{border-bottom:#ddd 1px dotted;margin-right:5px }
.toc-entry-col1 { 
font-weight:bold;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));
}
</style>
<div id="toc">
<div id="bp_toc">
Loading TOC. Please wait....</div>
<script src="http://blogtipscodes.googlecode.com/files/sitemap2.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>

>> Preview it before publishing it. If you like it then you can publish it. And then you're done.

Having trouble ?? Shoot the comment section and I will help.

Posted in: blogging tips , HTML , SEO