How to Create HTML Sitemap in Blogger?

What is a HTML Sitemap?

A sitemap is a file where you provide information about the pages, posts on your site, and the relationships between them. Search engines like Google, Bing read this file to crawl your site more efficiently.

Main Question Arises here in blogger there is no permission to access that Cpanel file because hosting is controlled by google but in Blogger Settings there is an option available to set up XML sitemap.
In Google you will found the various websites to create an XML sitemap easily

Toady we discuss about HTML sitemap not XML sitemap.

An HTML sitemap is also a piece of code that displays blogger all posts Label wise to help the viewers understand website layout structure and their posts. We developed a simple, smart, and shortcode that you can use in your blogger website without any problems, there is no need to do coding. Let's see here how to insert a sitemap in your blogger page with help of screenshots

How to Create HTML Sitemap?

Step (a): Go to Blogger Dashboard Click on Page Section at Left Sidebar Menu after that tap on Create a New Page and copy the code that we provide below and paste it here in Page HTML Section, not in Compose Mode. After Pasting code Save and Publish Page. That's done you have successfully created a Blogger HTML Site map page. Copy the link of page and Show at Bottom of Footer menu pages.

Here is the code of Blogger HTML sitemap code.

Remember to place the code in the HTML section of the page correctly.
Then save the HTML sitemap code in your blogger Dashboard.

Add this Shortcode :

<script src="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap.js" type="text/javascript"></script><link href="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css" rel="stylesheet"/><script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=pikisitemap" type="text/javascript"></script>

That's done now save the code on the blogger page. Sitemap is created

How to Create HTML Sitemap for Labels?

Step (b):  Go to Blogger Dashboard Click on Page Section at Left Sidebar Menu after that tap on Create a New Page and copy the code that we provide below and paste it here in Page HTML Section, not in Compose Mode. After Pasting code Save and Publish Page.

Remember to Replace the blue Color Label with your Posts Label Correctly Lowercase and Uppercase letters should be the same (means the first letter is capital or not in Post Label check properly)

Also, remember to change the title in between h4 tags blue color text below.

 That's done you have successfully created a Blogger HTML Site map page. Copy the link of page and Show at Bottom of Footer menu pages.

Add this Shortcode :

<script src="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-label.js" type="text/javascript"></script><link href="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css" rel="stylesheet"/><div class="stiemap-posts">  <h4>Blogger Test</h4>  </div><div class="stiemap-wrap"><script src="/feeds/posts/default/-/My Label?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script></div>

That's done now save the code on the blogger page and you have created a Specific (means for one Label only) Label HTML Sitemap.

See the demo of HTLM site map below screenshot