How to Create HTML Sitemap in Blogger?


1.0): 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

2.0): 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

3.0): 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 


Post a Comment

25Comments
Community Rules & Guidelines
1: Do not post email-id or any kind of personal information.
2: Do not post your own blog/website links.
3: For Help & Support use the Contact Us form.
*Comments will not be approved if the above rules are not followed!
  1. Is possible to limit number of post in this sitemap ?

    ReplyDelete
    Replies
    1. Yes, its possible you can change the value 9999 in last line of the code

      Delete
  2. Is possible to do only for certain label of post in this sitemap ?

    ReplyDelete
    Replies
    1. Yes, possible you can set label in last line of the code. Kindly contact us we will help you.

      Delete
  3. how to do to set certain label of post in the last line code

    ReplyDelete
    Replies
    1. We already updated this article, please read again

      Delete
  4. how to set a certain label in sitemap can you help please

    ReplyDelete
    Replies
    1. We already updated this article, please read again

      Delete
  5. I have to create sitemap for every post or every page?
    i have already created for xml and html sitemaps for entire blogger.
    and i need to submit every sitemap to google?
    is this good if i create two sitemaps(html & xml) for entire website and not create another? Thanks in advance.

    ReplyDelete
    Replies
    1. HTML is only for your viewers but XHTML is very important for your ranking in google

      Delete
  6. Master Mr. manu and PIKITEMPLATE TEAM. Thank You very much. a bundle of thanks. Now i am happy because of PIKITEMPLATE TEAM. very attractive look on my blog. Indian jobs portal sitemap

    ReplyDelete
  7. Great Blogger Templates sir, Thank You.

    ReplyDelete
  8. Hello piki. I got an error message in google searchconsole on sitempa. Please help

    ReplyDelete
    Replies
    1. Please contact us through email or social media and share screenshot?

      Delete
  9. Hello, is it possible to change "New!" from English to any language?

    ReplyDelete
    Replies
    1. Yes, sure please contact us by whatsapp or email.

      Delete
  10. Can we show post related to a single label on a page?

    ReplyDelete
    Replies
    1. Yes, sure just follow step 2 above:- "How to Create HTML Sitemap for Specific Label?
      "

      Delete
  11. Hello piki Thank you for great post.
    It is possible that specific label sitemap can be shorted by alphabetical order.

    ReplyDelete
    Replies
    1. Yes, possible but try to use label specified sitemap code

      Delete
  12. H1 tag missing in my template’s main page. When I tried to put h1 tag manually, it shows too many h1 tags in blog posts.

    ReplyDelete
    Replies
    1. Please share your blog details with us on email.

      Delete
Post a Comment