Here is a sweet HTML Sitemap for every blogger to use on their blog for better navigation of their visitors. I have taken my time to explain its features below:
A) This HTML sitemap will display all posts title of your blog with links along with its published/ last modified dates and tagged labels in a tabular form. It also shows the number of posts in your blog.

B) Automatic updating is one of the best feature of this site map page i.e. all your future blog posts will automatically added to this sitemap. Additionally, this blogger sitemap will also work even you are using a responsive blogger template.

C) I have inserted a user friendly sorting options in the Headings named Post Titles, Post Date and Labels. In other words, your blog readers may sort posts title from ascending (i.e. 0 to 9, A to Z) to descending (i.e. 9 to 0, Z to A) order. He/she may sort the blog posts with the newest to oldest dates and vice versa.

D) Your blog readers may filter all posts filed under a specific label/category. That means if your live visitors want to see only posts with label (say SEO) then he/she can filter all blog posts tagged with label SEO. It also display the number of blog posts associated with that filtered label i.e. SEO.

E) Last but not least I have also manage to show the blog posts snippets on hover your mouse cursor over the posts titles.

With these simple steps you may create a HTML site map for your blog readers as well as search engine bots.

Step-1:

  • Login to your blogger account 
  • Go to the Dashboard of the particular blog in which you want to add the static HTML site map page.

Step-2:

  • Select Pages from the left Navigation bar 
  • Click on New Page.

 Step-3:

  • Give page title “Sitemap” without quote and hit the Publish menu button. 
  • This process will create your blog static site map HTML page with the exact sitemap URL like – http://YourBlogName.blogspot.com/p/sitemap.html

Step-4:

  • From the opened window
  • Click on the name of that sitemap page so that page editor will open again. 
  • Now, you may change the title again as you wish viz.

Step-5:

  • Now, go to the HTML mode of that page and paste the following codes. You may also write something on this page for your users before publishing it.

<style> #swtBPT { background: transparent; width: 100%; color: #999; margin: 0 auto; padding: 5px; } span.swtBPT-MessageBox { display: block; background: #0A6474; color: #ECF1F4; text-align: center; font-family: cursive; font-size: large; } #swtBPT table { width: 100%; margin: 0 auto; border: 1em solid #0A6474!important; border-collapse: collapse; border-spacing: 0; border-color: transparent; } .swtBPT-Header-Posts, .swtBPT-Header-Dates, .swtBPT-Header-Labels { padding: 1em !important; line-height: 1em; text-align: center; color: azure; transition: all .4s ease-in-out; } .swtBPT-Header-Posts { background: #23A596; } .swtBPT-Header-Dates { background: #23AE84; } .swtBPT-Header-Labels { background: #18A993; } .swtBPT-Header-Posts:hover, .swtBPT-Header-Dates:hover, .swtBPT-Header-Labels:hover { background: #0A6474; color: #FAFBFC; } .swtBPT-Header-Posts a:link, .swtBPT-Header-Posts a:visited, .swtBPT-Header-Dates a:link, .swtBPT-Header-Dates a:visited, .swtBPT-Header-Labels a:link, .swtBPT-Header-Labels a:visited { font-size: 1em; text-transform: uppercase; text-decoration: none; color: #fff; font-family: Georgia, serif; font-weight: 800; letter-spacing: 1px; } .swtBPT-Header-Posts a:hover, .swtBPT-Header-Dates a:hover, .swtBPT-Header-Labels a:hover { text-decoration: none; } tfoot.swtBPT-Right, tfoot.swtBPT-Right a { background: #0A6474; color: #FAFBFC; text-align: center; font-family: -webkit-body; font-size: small; } #swtBPT tbody:nth-child(even) { background: #9FD7D2; color: #34887E; } #swtBPT tbody:nth-child(odd) { background: #8BD0CA; color: #34887F; } .swtBPT-PostsTitles, .swtBPT-PostsDates, .swtBPT-PostsLabels { font-size: 88%; padding: 10px; transition: all .3s ease-in-out; } .swtBPT-PostsTitles:hover, .swtBPT-PostsDates:hover, .swtBPT-PostsLabels:hover { background: #fff; } .swtBPT-PostsTitles a, .swtBPT-PostsDates a, .swtBPT-PostsLabels a { text-decoration: none; color: #666; transition: all .3s ease-in-out; } .swtBPT-PostsTitles a:hover, .swtBPT-PostsDates a:hover, .swtBPT-PostsLabels a:hover { color: #f65476; } </style><div id="swtBPT"> Loading Sitemap. Please wait....</div> <noscript>Either you have disabled scripts in your browser or your browser does not support JavaScript!</noscript><script src="https://9e03e74125fb7ace004443ce27e5dcd1808a3961.googledrive.com/host/0B-tJ1weveGVDQWsyWjRNbHhtWFk/swtBPT.js"></script> <script src="/feeds/posts/default?alt=json-in-script&amp;max-results=500&amp;callback=AllBloggingMag" type="text/javascript"></script>

  • Finally, Publish your Site Map page and Enjoy!
As you have created this HTML site map page for your blog users, I strongly recommend you to link this page to every pages of your blog i.e. either at the end of each blog posts or in header/footer or sidebar etc.



Have any questions? Feel free to ask me via the comments section! Remember to share this tutorial with others on Facebook, Twitter & Google Plus.