Create and Add HTML Sitemap To Blogger

You all know about .xml sitemaps which are used to crawl your blog posts by Search engine bots.But those blogger .xml sitemaps are not human readable or linked so it will be very difficult to find and use a particular link from xml sitemaps.

Read : Remove Sidebar on Specific Pages in Blogger and Increase Layout Size

Usually, .xml sitemaps are for search engine bots for crawling your blog posts deeply.It can be only decoded and used by those special bots for specific search engine crawlers and not humans.

This is the actual situation were we can make use .html sitemaps which are human readable and linked to specific post with right attribution

Why This Sitemap ?

  • Fast loading
  • Very sleek with a combination of Javascript and CSS
  • Easy to configure and use
  • Linked to specific post
  • Label based divider
  • Light blue and light theme combination
How To Add It ?
It’s just only matter of adding a small piece of HTML tag to particular page which you want to make act as your blog sitemap.
1. Go to Blogger Dashboard > Pages > Add New Post 
2. Now switch to HTML mode 
3. Paste the below given HTML Tag with proper editing 

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


Changes To Make ::: Replace http://www.ipeeworld.com with your blogger blog URL address.
Now finally click save and see the difference and how it works
(Note : You do need to change my blog URL with yours or else you will get my blog’s sitemap instead of yours )

About Astro Joseph

Hi, I'm Astro Joseph the founder and CEO of IPEE World and IPEE Network.I started this blog for a passion and it is now empowering millions of readers around the globe.Read more about me at About and Contact page.

Leave a Reply

Your email address will not be published. Required fields are marked *