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

On a blogger’s website, there are two types of site maps. One is an XML site map, and another is an HTML site map. / how to create an HTML sitemap page for blogger / How to automatically create an HTML sitemap page for Blogger

How To Create an HTML Sitemap Generator Page On Blogger With HTML Script?

Compared to WordPress, a blogger has very few features. But with the help of some codes, you can do more with your simple blogger website. On the WordPress website, there are many Automatic Sitemap page plugins, such as Rank math, Yoast SEO & More SEO Tools. However, on the blogger’s website, you will find only an XML site map, which you will find at “https://yourblog.blogspot.com/sitemap.xml”.

So, today in this guide we will share with you how to add an HTML Sitemap page to a Blogger Website with the help of JavaScript, HTML, and CSS Codes. When we started a blog on the Blogspot site, we did some research to add a site page to our blogger website “https://infotechapb.blogspot.com” (APB Smart Guide). We are now going to share with you this experience and codes for building your HTML Sitemap page on Blogger.

How To Create HTML Sitemap Page In Blogger

Before you can start creating your HTML site map, you should learn the differences between XML Sitemap, HTML Sitemap, and Sitemap Structure. Since a structured site map is used for construction purposes, so we will discuss it later. Now:

What is a Sitemap?

A sitemap is a list of pages and posts on a website with URLs for its domain including their conversion time. The sitemap makes it easy to view any website content within minutes to pages and people.

How many types of sitemap?

There are three main types of Sitemap, one is Sitemap XML, the second is Sitemap HTML and the last is a custom sitemap. “Structures Sitemap” is also known as “Site Tree”. Use of this site map in sequence: 1. “XML Map”> 2. “HTML Sitemap”> 3. “Edited Sitemap”.

What is an XML sitemap?

XML Sitemap is a file for your website, which provides information about your website content to bots as well as to Search Engine Crawlers. XML Sitemap provides information to bots listing URL Posts by importance and includes the time of the last modified post.

What is an HTML sitemap?

HTML Sitemap is a page for all posts and website content, a fact that links all of your website content to a single page that expands your internal linking of Search Engine Optimization (SEO) goals. It also makes it easier to navigate your visitors’ websites.

Did you know that you can do more with this simple HTML site map? So, we’ve created an all-in-one HTML site map page for bloggers to better understand, or share with you what’s best for you. Below are links to all sorts of site map pages.

Now that you have learned the differences between site types, it is time to move on and start creating HTML Sitemap. As a result of the HTML site map page, we provide below the view button with a link to our HTMLger website Blogger. You can see it by clicking on the “Short View” button below:

JavaScript Code for Creating a Blogger Map Page

The JavaScript provided below is also called HTML Sitemap Generator. Many bloggers call it an HTML map template. But it is basically a JavaScript code for creating HTML Sitemap Page For Blogger. Copy the JavaScript provided below to your ClipBoard and paste it into 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

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.

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

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.

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.

Leave a Comment