How to create an HTML Sitemap Page in Blogger [2022]

A Sitemap is required for your blogger website to help your readers navigate through your blog posts easily. The sitemap is of two types in Blogger: HTML and XML.

In simple words, An HTML sitemap is for your readers to navigate easily within your posts while the XML sitemap is for search engines to understand your posts.

An HTML sitemap will help in decreasing your site's bounce rate while adding a custom XML sitemap will increase your Blogger crawl rate as search engines will be able to crawl your site easily!

As sitemap can automatically update the posts so in this article, we'll showcase how to create an HTML Sitemap Page on Blogger (Blogspot) website.

 

How to Create an HTML Sitemap Page in Blogger

Follow the given steps to create an HTML Sitemap page in blogger:

• Open Blogger and head over to the page section
• Create a new page
• Now click on the HTML tab and copy-paste the below code

<style> #bp_toc { color: #757; margin: auto; padding: ; border: 1px solid #6E1907; float: left; width: 100%; } span.toc-note { display: none; } #bp_toc tr:nth-child(2n) { background: #ffffff; } td.toc-entry-col1 a { font-weight: bold; font-size: 14px; } .toc-header-col1, .toc-header-col2, .toc-header-col3 { background:#28fafa; } .toc-header-col1 { padding: 10px; width: 250px; text-align: center; } .toc-header-col2 { padding: 10px; width: 75px; } .toc-header-col3 { padding: 10px; width: 125px; } .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size: 13px; text-decoration: bold; color: #000000; font-weight: 700; letter-spacing: 0.5px; } .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration: none; } .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding: 5px; padding-left: 5px; font-size: 12px; } .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a { color: #000000; font-size: 13px; text-decoration: none } .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover { text-decoration:underline; } #bp_toc table { width: 100%; margin: auto; counter-reset: rowNumber; } .toc-entry-col1 { counter-increment: rowNumber; } #bp_toc table tr td.toc-entry-col1:first-child::before { content: counter(rowNumber); min-width: 1em; min-height: 3em; float: left; border-right: 1px solid #fff; text-align: center; padding: 0px 11px 1px 6px; margin-right: 15px; } td.toc-entry-col2 { text-align: center; } </style> <div id="bp_toc"> </div> <script src="http://mybloggerlab.com/js/sitemap.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>

• Save the page and it's done!

Final Words

That's the way to set up an HTML sitemap for your blogger website. The code will itself update the post links. Hope this article might help you, feel free to comment if you have encountered any problems while implementing this code!

Also Check: How to Get High Quality Backlinks within 48 Hours (2022)