How to Create HTML User Sitemap for Blog Posts in Blogger ?

HTML user sitemap is a web page that lists all of the pages on a website in a structured manner. It is designed to help users navigate the website more easily, especially large and complex websites. In this article, we will show you the detailed steps on how to create and configure a HTML user sitemap for Blogger Blog posts on your Google Blogger.

Advantages of using this HTML User Sitemap

• Clear cut Navigation for the users
• Improves User Experience to check the latest Nth posts in a single page
• Increase Blog Traffic
• No manual updating for the sitemap when there is a new change or post published.

Note: This is a sitemap for Blog Visitors or audience. Not for Search Engines.

Pre-requisites

There are no prerequisites to implement this user friendly HTML sitemap. If you want to more customization then you should have basic knowledge of HTML and JavaScript.

Steps to Create & Configure HTML User Sitemap

Step 1: Log into Blogger with your Goggle Gmail account.

Step 2: From menu section, select pages >> Click on + New Page to create a new one

Step 3: Provide the name for the New Page of your choice. Here we have named it as “Sitemap” which is a meaningful title for the HTML user sitemap.

Step 4: Now click on compose view and add the following JavaScript code snippet.

What will this script do? This will fetch the feed of your Blog posts and organizes the post by latest blog posts first. Here in this script we have given let numposts = 100; it means it will list the latest 100 posts on your blog. You can always change this number according to your needs.

<script type="text/javascript">
    let numposts = 100;
    let standardstyling = true;

    function showrecentposts(json) {
        for (let i = 0; i < numposts; i++) {
            let entry = json.feed.entry[i];
            let posttitle = entry.title.$t;
            let posturl;
            if (i == json.feed.entry.length) break;
            for (let k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'alternate') {
                    posturl = entry.link[k].href;
                    break;
                }
            }
            posttitle = posttitle.link(posturl);
            if (standardstyling) document.write('<h4> ');
            document.write(posttitle);
        }
        if (standardstyling) document.write('</h4>');
    }
</script>

Step 5: Add your Website Domain name and append the code at the end of the JavaScript code.

<h2 style=”text-align: left;”>Blog Posts:</h2>

<script src=”https://[add your domain name]/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=100″></script>

Step 6: Click on Preview to view the sample preview of the website HTML sitemap.

Sample Output

Step 7: If very thing goods then click on Publish and view your HTML Sitemap changes. That’s all you are done creating a user friendly sitemap for your blogger posts.

Conclusion

In this post, we have covered the detailed implementation steps for creating a HTML user-friendly sitemap for your blogger blog visitors. Organizing this HTML sitemap for your sitemap by latest blog posts first will helps visitors find what they are looking for on your website easily.

FAQs:

Q1: Does Blogger has build in HTML sitemap?

No, Blogger does not have this feature by default. Alternately you can use the latest posts widget but this will not work in Posts or Pages.

Q2: Is blogger HTML sitemap really important for Search Engines like Google and Bing?

Blogger HTML Sitemap is provide Blog victors for user experience and to quickly navigate to page that they are looking for in the Blog. This is not designed for search engine such as Google or Bing.