How To Create HTML Sitemap Page In Blogger

Sitemap page is one of most important page of the blog. Sitemap display all blog posts in one single page, there are two types of Sitemap XML and HTML. Let me explain difference between these two sitemaps. XML sitemaps are for search engine user can not understand XML Sitemaps and HTML sitemaps is for users or visitors of the blog, where they can find all posts in one page.


The advantage of creating HTML sitemap page for blogger is  that it helps you to improve your page rank and to increase pageviews and bounce rate. Another advantage is readers can easily seek out what they are looking for.

If you want to see the live demo of HTML Sitemap Page for better understanding.

How To Create HTML Sitemap Page In Blogger

You can create Blogger Html sitemaps in two ways like if you want to show all posts for a particular label else to show all your posts which will include all the posts from every label So lets see How To Create Sitemap Page In Blogger.

Create HTML Sitemap Page For All Lables In Blogger

  • First Login to Blogger dashboard
  • Now Select the Blog and Go to Pages > New Page
  • Go to HTML mode and paste below code there
<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
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);
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;
-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{
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;


<br />
<div id="toc">
<script src="" type="text/javascript"></script>
<script src=";alt=json-in-script&amp;callback=loadtoc">
<a href=""><span style="font-size: xx-small;">Widget by The SEO Blogging</span></a>
  • Now change with your blog url and publish the page that's it. you have successfully created HTML Sitemap for Blogger.
I hope you guys like above HTML Sitemap for Blogger, Let me know your thoughts about the widget and don't forgot to share with others.

1 comment:

  1. Thanks please how do i get a free template for my blogger blog that will work well for my kind of blog that ia also seo friendly thanks