Blogging SEO Tutorials

How To Create HTML & XML Sitemap Page in Blogger

Adding a Sitemap to your blog will help your readers to navigate through your blog posts more easier, well a HTML sitemap is for your readers which will be a page displayed in your blog, and XML sitemap is for the search engines. So, adding adding an HTML sitemap will decrease your bounce rate and adding a custom XML sitemap will increase your organic traffic because search engines can crawl your site more easily!

Speciality of this sitemap is it is capable of updating the new posts by itself, only integrate it for the first time and sit back and enjoy looking at it. In this sitemap all the posts are categorised properly, and the new posts are indicated as “New!” in orange colour corresponding to the post links, this sitemap is fully coded in javascript and CSS, Abu Farhan is the coder of this sitemap! As you can only see a piece of the sitemap in the above screenshot, below is a demo link to take look at all the features of this sitemap!

Steps to Create HTML Sitemap Page in Blogger

  • Head on to Blogger » Pages » and create a new Page.
  • Now click on HTML tab, and copy-paste the below code

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

  • Replace yourblogurl with your blog URL.
  • Adjust 9999 to display the maximum number of posts.
  • That’s it! Now click on publish and you’re done!!

Steps to Create XML Sitemap Page in Blogger

  • Goto ctrlq.org/blogger
  • Enter your blog URL and click on Generate Sitemap
  • Now copy the code generated and come back to blogger.
  • Goto settings » Search Preferences » Crawling & Indexing section.
  • Enable Custom Robots.txt and paste the code.
  • Save it! you’re done.
Also Read..
  • How to Add Whatsapp Sharing Button on Blogger
  • 10 Quick Tips to get Adsense Approved within Hours

Final words!

Well that’s how you should create a HTML or XML sitemap for your blog, and it’s one way integration, the code will itself updated the the post links by our blog feed. Hope you guys enjoyed the post, feel free to comment your reviews and problems below. Happy blogging!

About the author

Sasidharan

Sasidharan is The Founder & CEO Of Techspotz, A Blogger Who is Growing Up Very Fast From Chennai, India. He Likes To Write On Any Topic Related To Blogging Such As Tech, SEO, Android, Hacking, Online Tutorials.

Leave a Comment