how-to-add-html-site-map-to-blogger

How to add HTML site map to blogger

Site map is not new in the field of search engine optimization. HTML sitemap has 2 benefits. The first is it enhances your search result, giving you a better search results in search engines. The second benefit is that your visitors can easily find all the posts in your blog. HTML sitemap is more attractive as compared
to XML sitemap. Some people manually add link of each page that they have on blogger to create a HTML page. But it is a mere waste of time. So here is the easiest way to create a HTML site map for your blogger.

1. Go to blogger
2. Navigate to pages and create a new page
   
   
3. Switch to HTML mode and make sure that the HTML input box is all empty (If not make it empty.)
   
   
4. Copy and paste the below given code into that HTML box

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<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>

<br />
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://techtrickzone.blogspot.in/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
</div>

5.  Replace techtrickzone.blogspot.in with the url of your blog in the above code.
   
   
6. Click publish option and now check the page you have published. It will contain a HTML sitemap.
   
   

If you have any difficulties to get the HTML sitemap working , then let me know in the comment section given below.

Shhared On techtrickzone.