How To Create HTML Sitemap Page In Blogger – 3 Easy Steps

On the blogger website, there are two types of sitemaps. One is XML Sitemap, and another one is HTML Sitemap. / how to create HTML sitemap page in blogger / How to Create Auto Generate HTML Sitemap Page On Blogger

How To Create HTML Sitemap Generator Page In Blogger With HTML Script?

As compared to WordPress, blogger has very less features with it. But with the help of some codes, you can do more with your simple blogger website. On the WordPress website, there are many plugins for the Automatic Sitemap page, like Rank math, Yoast SEO & More SEO Tools. But on the blogger website, you will get only an XML sitemap, which you will find at the “https://yourblog.blogspot.com/sitemap.xml”.

So, today in this guide we’ll share with you the way to add an HTML Sitemap Page in Blogger Website with the help of JavaScript, HTML, and CSS Codes. When we started the blog on the Blogspot site, we do some research to add a sitemap page in our blogger website “https://infotechapb.blogspot.com” (APB Smart Guide). Now we are gonna share with you this experience and the codes to build your HTML Sitemap Page on Blogger.

How To Create HTML Sitemap Page In Blogger

Before you start creating your HTML sitemap, you should learn the difference between XML Sitemap, HTML Sitemap, and the Structure Sitemap. As structured sitemap is generally used for design purposes, so we’ll discuss it later. Now:

What is Sitemap?

Siemap is a list of pages & posts of a website with its domain URLs including their modification time. Sitemap makes easy to view any website’s content within minutes to Crawlers and as well as Human Being’s.

How many types are of Sitemap?

There are three primary types of sitemap are, one is XML Sitemap, the second one is HTML Sitemap and the last one is Structured Sitemap. “Structures Sitemap” is also known as “Site Tree”. The usage of these sitemap’s are respectively: 1. “XML Sitemap” > 2. “HTML Sitemap” > 3. “Structured Sitemap”.

What is XML Sitemap?

XML Sitemap is a file of your website, which gives the information of your website’s content to bots as well as Search Engine Crawlers. XML sitemap gives information to bots a list of URL Posts with its priority and including the time of the post last modified.

What is HTML Sitemap?

An HTML Sitemap is the page of a website’s all posts and content, which is basically linking your website’s whole content in one page that increases your internal linking For Search Engine Optimization (SEO) Purposes. And it makes it easier to navigate through your websites for your Visitors.


Did you know that you can do more with these simple HTML sitemaps? So, we’ve created every type of HTML sitemap page on blogger for your better understanding, or to share with you that which will be good for you. Below are the links of all types of the Sitemap page

how-to-create-html-sitemap-page-in-blogger-boxed-labeled-red-black-color
HTML-Sitemap-Page-On-Blogger-simple-list-view
html-sitemap-generator-grid-view-sitemap-page

Now after learning the difference between the types of sitemaps, it’s time to move forward and start creating the HTML Sitemap. As the result of the HTML Sitemap page, we give below a View button with a link to our Blogger Website’s HTML Sitemap Page. You can see it by clicking on the “View Demo” button below:

JavaScript Code to Create Sitemap Page For Blogger:-

Below provided JavaScript is also called HTML Sitemap Generator. Many bloggers called it the HTML sitemap template. But it is basically the JavaScript Code to Create an HTML Sitemap Page For Blogger. Copy the below-given JavaScript to your ClipBoard and paste it on your Blogger HTML Sitemap Page.

<script type='text/javascript'>

var postTitle = new Array();
var postUrl = new Array();
var postPublished = new Array();
var postDate = new Array();
var postLabels = new Array();
var postRecent = new Array();
var sortBy = "titleasc";
var numberfeed = 0;

function bloggersitemap(a) {
    function b() {
        if ("entry" in a.feed) {
            var d = a.feed.entry.length;
            numberfeed = d;
            ii = 0;
            for (var h = 0; h < d; h++) {
                var n = a.feed.entry[h];
                var e = n.title.$t;
                var m = n.published.$t.substring(0, 10);
                var j;
                for (var g = 0; g < n.link.length; g++) {
                    if (n.link[g].rel == "alternate") {
                        j = n.link[g].href;
                        break
                    }
                }
                var o = "";
                for (var g = 0; g < n.link.length; g++) {
                    if (n.link[g].rel == "enclosure") {
                        o = n.link[g].href;
                        break
                    }
                }
                var c = "";
                if ("category" in n) {
                    for (var g = 0; g < n.category.length; g++) {
                        c = n.category[g].term;
                        var f = c.lastIndexOf(";");
                        if (f != -1) {
                            c = c.substring(0, f)
                        }
                        postLabels[ii] = c;
                        postTitle[ii] = e;
                        postDate[ii] = m;
                        postUrl[ii] = j;
                        postPublished[ii] = o;
                        if (h < 10) {
                            postRecent[ii] = true
                        } else {
                            postRecent[ii] = false
                        }
                        ii = ii + 1
                    }
                }
            }
        }
    }
    b();
    sortBy = "titledesc";
    sortPosts(sortBy);
    sortlabel();
    displayToc();
}

function sortPosts(d) {
    function c(e, g) {
        var f = postTitle[e];
        postTitle[e] = postTitle[g];
        postTitle[g] = f;
        var f = postDate[e];
        postDate[e] = postDate[g];
        postDate[g] = f;
        var f = postUrl[e];
        postUrl[e] = postUrl[g];
        postUrl[g] = f;
        var f = postLabels[e];
        postLabels[e] = postLabels[g];
        postLabels[g] = f;
        var f = postPublished[e];
        postPublished[e] = postPublished[g];
        postPublished[g] = f;
        var f = postRecent[e];
        postRecent[e] = postRecent[g];
        postRecent[g] = f
    }
    for (var b = 0; b < postTitle.length - 1; b++) {
        for (var a = b + 1; a < postTitle.length; a++) {
            if (d == "titleasc") {
                if (postTitle[b] > postTitle[a]) {
                    c(b, a)
                }
            }
            if (d == "titledesc") {
                if (postTitle[b] < postTitle[a]) {
                    c(b, a)
                }
            }
            if (d == "dateoldest") {
                if (postDate[b] > postDate[a]) {
                    c(b, a)
                }
            }
            if (d == "datenewest") {
                if (postDate[b] < postDate[a]) {
                    c(b, a)
                }
            }
            if (d == "orderlabel") {
                if (postLabels[b] > postLabels[a]) {
                    c(b, a)
                }
            }
        }
    }
}

function sortlabel() {
    sortBy = "orderlabel";
    sortPosts(sortBy);
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postLabels[b];
        firsti = a;
        do {
            a = a + 1
        } while (postLabels[a] == temp1);
        b = a;
        sortPosts2(firsti, a);
        if (b > postTitle.length) {
            break
        }
    }
}

function sortPosts2(d, c) {
    function e(f, h) {
        var g = postTitle[f];
        postTitle[f] = postTitle[h];
        postTitle[h] = g;
        var g = postDate[f];
        postDate[f] = postDate[h];
        postDate[h] = g;
        var g = postUrl[f];
        postUrl[f] = postUrl[h];
        postUrl[h] = g;
        var g = postLabels[f];
        postLabels[f] = postLabels[h];
        postLabels[h] = g;
        var g = postPublished[f];
        postPublished[f] = postPublished[h];
        postPublished[h] = g;
        var g = postRecent[f];
        postRecent[f] = postRecent[h];
        postRecent[h] = g
    }
    for (var b = d; b < c - 1; b++) {
        for (var a = b + 1; a < c; a++) {
            if (postTitle[b] > postTitle[a]) {
                e(b, a)
            }
        }
    }
}



function displayToc() {
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postLabels[b];
        document.write("");
        document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');
        firsti = a;
        do {
            document.write("<p>");
            document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + "");
            if (postRecent[a] == true) {
                document.write(' - <strong><span>New!</span></strong>')
            }
            document.write("</a></p>");
            a = a + 1
        } while (postLabels[a] == temp1);
        b = a;
        document.write("</div></div>");
        sortPosts2(firsti, a);
        if (b > postTitle.length) {
            break
        }
    }
}

</script>

<script src="http://infotechapb.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script

Steps To Create HTML Sitemap Page on Blogger?

demo-page-of-blogger-website-sitemap-page-and-final-image-of-how-to-create-html-sitemap-page-in-blogger-schema

Step By Step Guide To Add HTML Sitemap Page In Blogger Website

Total Time: 4 minutes

Step 1. Open Blogger Dashboard> Pages> And Add New Page.
clicking-on-pages-and-adding-new-page-at-blogger-website

In this Step go to blogger.com and log in with your Gmail id, Now in the blogger dashboard click on the Pages showing in the left navigation pane. Now click on New Page or add a new page.

Step 2. Rename Page as Sitemap & Paste Script in Code Editor
renaming-the-new-page-as-sitemap-and-opening-editor-as-html-view-then-pasting-java-script-code

In Step two rename this new page as “Sitemap” and click on HTML View, then paste Java Script Code Provided here.

Step 3. Replace “infotechapb.blogspot.com” With Your Blog URL And Publish Page.
showing-rename-the-last-line-of-java-script-with-blogger-website-address-and-publish-page-after-entering-search-description

After Pasting the javascript code, In step 3 replace the last line of code with your blogger website URL and enter the search description of your blogger Sitemap page then click on “Publish”.

Supply:

  • Gmail Account.
  • HTML Sitemap Generator
  • Blogger Sitemap Generator

Tools:

  • Desktop.
  • Blogger Website

Materials: CSS, HTML & JavaScript

After Publishing the Sitemap page, you can add this to your footer menu to easily navigate your visitor’s as well search engine crawlers.

Final Words:-

You successfully created your blogger HTML Sitemap Page. Hope you’ll find these steps helpful to creating your Sitemap Page. Did you know you can apply some extra codes to your Sitemap Page to make it more beautiful and Stylish Looking?

You May Also Like Related To This:

3 thoughts on “How To Create HTML Sitemap Page In Blogger – 3 Easy Steps”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.