How to Create an HTML Sitemap on Blogspot?

A sitemap is a map of your website that helps search engines find, crawl and index all of your website's content. Sitemaps tell search engines which pages on your site are most important. 

This sitemap HTML code is showing your whole post automatically.

What is XML Sitemap in Blogger?

XML Blogger sitemap is that page of your blog which is developed with the help of extensible Markup Language and has.xml extension. It is specially created for search engines.

XML sitemap is submitted to all the search engines to let them crawl and index Blogger blog which improves the blog's crawling and indexation rate.

What is HTML Sitemap in Blogger?

HTML Blogger Sitemap is a normal webpage with .html extension. It displays a list of all your published posts which can be organized by topics, labels or by published date.

HTML Blogger sitemap is basically created to help users to easily navigate and find all the published posts of your Blog.

For instance, check the HTML sitemap page of our blog, you can see all our published posts which are organized by labels. Isn’t that awesome? In this blog post, I’ll share a simple method to add Elegant HTML Sitemap for blogger.

Features of  HTML sitemap page for Blogger

• Sorted alphabetically (A to Z).
• Lists blog posts based on labels.
• Automatically adds "New" tag to latest articles.
• Labels are neatly separated.
• A lightweight Javascript used.
• Beautiful color combination.
• Blog posts are numbered automatically on each labels.
• Easy for users to navigate through the posts.

How to generate HTML sitemap for Blogger Blog?

1. Log in to your blogger and go to the Dashboard.
2. Go to Pages and create a new page and name it as "Sitemap".
3. Add Search description under page settings.
4. Click on Options, under Reader comments, select "Don't allow".
5. Now switch to HTML mode and clear all the default codes present.
4. Add the below code and if Blogger shows HTTPS error, just dismiss it.
5. Replace yourblog.blogspot.com with your blog URL.
8. Click on publish, and your done.

HTML Sitemap Style 1

<style type="text/css"><br />#sitemap{<br />width:100%;<br />margin:5px auto;<br />border:1px solid #05a0ff;<br />-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);<br />-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);<br />box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);<br />}<br />.labl{<br />color:#FF5F00;<br />font-weight:bold;<br />margin:0 -5px;<br />padding:1px 0 2px 11px;<br />background:-moz-linear-gradient(right,#c2eafe 0%,#05a0ff 40%);<br />background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#05a0ff),color-stop(1,#c2eafe));<br />border:1px solid #37c2dd;<br />border-radius:4px;-moz-border-radius:4px;<br />-webkit-border-radius:4px;box-shadow:3px 3px 1px #a0a0a0;<br />-moz-box-shadow:3px 3px 1px #a0a0a0;-webkit-box-shadow:3px 3px 1px #a0a0a0;display:block;<br />}<br />.labl a{color:#fff;<br />}<br />.labl:first-letter{text-transform:uppercase;<br />}<br />.new{color:#FF5F00;<br />font-weight:bold;<br />font-style:italic;<br />}<br />.postname{font-weight:normal;<br />background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);<br />background:-webkit-gradient(linear,left 80,right 10,color-stop(0.50,#fff),color-stop(1,#C2EAFE));<br />}<br />.postname li{border-bottom: #ddd 1px dotted;<br />margin-right:5px<br />}<br /></style><br /><br /><br /><div id="sitemap"><br /><script src="https://amanbhattarai4400.github.io/csshosting/sitemap.js" type="text/javascript"></script><br /><script src="https://yourblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"><br /></script></div><br />

HTML Sitemap Style 2

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><style type="text/css"><br />.tb-sitemap {<br /> background-color: #222;<br /> color: #ddd;<br /> font-family: Verdana,Geneva,Tahoma,Arial,Sans-serif;<br /> font-size: 14px;<br /> font-weight: 410;<br /> overflow: hidden;<br /> border-radius: 5px;<br /> box-shadow: 0 0 9px rgba(0,0,0,.1);<br />}<br />.tb-sitemap .toc-header {<br /> color: #fff;<br /> font-family: inherit;<br /> font-weight: 410;<br /> font-size: 14px;<br /> background-color: #1A1B1E;<br /> margin: 0;<br /> padding: 13px;<br /> overflow: hidden;<br /> cursor: pointer;<br /> border-top: 1px solid #5c5c5c;<br /> border-bottom: 1px solid #5c5c5c;<br /> transition: initial;<br />}<br />.tb-sitemap .toc-header:hover {<br /> background: rgb(0,52,52);<br /> background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(3,106,30,1) 38%, rgba(0,182,182,1) 100%);<br />}<br />.tb-sitemap .toc-header:before {<br /> content: '';<br /> width: 0;<br /> height: 0;<br /> position: relative;<br /> float:right;<br /> top: 10px;<br /> right: 10px;<br /> border: 5px solid transparent;<br /> border-color: #aaa transparent transparent;<br /> transition: all .3s ease;<br />}<br />.tb-sitemap .toc-header.active {<br /> background: #1a1b1e;<br /> color: #fff;<br />}<br />.tb-sitemap .toc-header.active:before {<br /> border-color: #fff transparent transparent;<br /> top: 5px;<br /> -webkit-transform: rotateundefined-180deg);<br /> -moz-transform: rotateundefined-180deg);<br /> -ms-transform: rotateundefined-180deg);<br /> -o-transform: rotateundefined-180deg);<br /> transform: rotateundefined-180deg);<br />}<br />.tb-sitemap .loading {<br /> display: block;<br /> padding: 14px;<br /> text-decoration: blink;<br />}<br />.tb-sitemap ol {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> transition: initial;<br />}<br />.tb-sitemap li {<br /> counter-increment: step-counter;<br /> line-height: normal!important;<br /> margin: 0!important;<br /> padding: 7px 7px 7px 16px!important;<br /> white-space: nowrap;<br /> text-align: left;<br /> overflow: hidden;<br /> transition: initial;<br />}<br />.tb-sitemap li:first-child {<br /> background: rgb(0,52,52);<br /> background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}<br />.tb-sitemap li:nth-child(2n) {<br /> background: rgb(71,62,62);<br /> background: linear-gradient(90deg, rgba(71,62,62,1) 19%, rgba(0,0,0,1) 38%, rgba(0,52,52,1) 100%);}<br />.tb-sitemap li:nth-child(2n+3) {<br /> background: rgb(0,52,52);<br /> background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}<br />.tb-sitemap li::before {<br /> content: counter(step-counter)'.';<br /> margin-right: 5px;<br />}<br />.tb-sitemap a {<br /> color: #fff!important;<br /> text-decoration: none;<br /> font-size: 90%;<br /> transition: initial;<br /> font-weight:normal!important;<br />}<br />.tb-sitemap a:visited {<br /> color: #fff!important;<br /> transition: initial;<br />}<br />.tb-sitemap a:hover,.tb-sitemap a:visited:hover {<br /> color: #fff!important;<br /> text-decoration: underline!important;<br /> transition: initial;<br />}<br /></style><br /><div class="tb-sitemap" id="tb-sitemap"><br /><span class="loading">Sitemap Loading..</span><br /><script type="text/javascript"><br />var toc_config = {<br /> url: 'https://yourblog.blogspot.com',<br /> containerId: 'tb-sitemap',<br /> showNew: 12,<br /> newText: ' <strong style="font-weight:normal;font-style:normal;color:#000;font-size:11px;background:#fff000;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">New!</strong>',<br /> sortAlphabetically: {<br /> thePanel: true,<br /> theList: true<br /> },<br /> maxResults: 9999,<br /> slideSpeed: {<br /> down: 400,<br /> up: 400<br /> },<br /> slideEasing: {<br /> down: null,<br /> up: null<br /> },<br /> slideCallback: {<br /> down: function() {},<br /> up: function() {}<br /> },<br /> clickCallback: function() {},<br /> jsonCallback: '_toc',<br /> delayLoading: 0<br />};<br /></script><br /><script src="https://amanbhattarai4400.github.io/twistblogg/sitemap.js" type="text/javascript"/></script><br /></div><br />