How to Add HTML Sitemap in Blogger

Before we go ahead to add HTML Sitemap in your blogger, it is very important to know about what is an HTML sitemap and what is an XML sitemap ?

Add HTML Sitemap in Blogger

What is XML Sitemap?

Every search engine uses their own web crawlers (bots) to discover web pages from links within the site or from others sites. XML sitemap is a .xml file attached with your website which provides essential and important data of your blog posts to web crawlers. 

Sitemap file consists of all blog post URLs of your website with important data. Every search engine uses this data to index your web page or blog post in the best and possible way. 

XML file guarantees that all your blog posts will definitely get indexed in the search engines. XML sitemap is only for search engine crawlers not for website visitors. 

What is HTML Sitemap?

HTML sitemap is a regular and normal HTML page of your website which can be read by search engine crawlers as well as by readers of your website. Web crawlers treat it as a regular web page with many links. 

The main purpose of this HTML sitemap is to represent all your blog posts in an organized way so that your website visitor can easily navigate all your blog posts through a single page.

Difference between XML & HTML Sitemap
HTML Sitemap	XML Sitemap
HTML sitemaps are user friendly.	XML sitemaps are only for bots friendly.
Makes Users navigation easier on website	Makes bots navigation easier on websites.
Usually used for larger websites.	It is used for almost every website.
Helps users to find all content on a single page.	Helps search engines to index blog posts on the website.
It displays data	It stores and transports the data.

Add HTML Sitemap Page in your Blogger

Instruction : This is Label Based HTML Sitemap Page so you can only apply this on label based themes.

Step 1 :- Login in to your blogger account, go to your blog, then go to Pages >> New Page

How to add html sitemap in blogger 1

Step 2 :- Enter the “ Sitemap “ title in the page title field.

Step 3 :- Switch text-area to HTML mode.

Step 4 :- First if there is any default code so remove it & then enter the following code inside the blank field.

---

<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://www.yourblog.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script>

---

Step 5 :- Replace YourBlog.blogspot.com with your blog URL.

Step 6 :- Under Page Setting >> inside Search Description option add description of this page

How to add html sitemap in blogger : Page Description

Step 7 :- Click on Options >> under Reader Comments >> select Do not allow, hide existing

 

How to add html sitemap in blogger : Comment Option

Step 8 :- Click on Publish.

Note :- In this blog I told you only how to add a simple HTML sitemap. If you want to add a stylish HTML sitemap so you can with this “--” blog.

Hurray!!

You have successfully applied a simple HTML sitemap to your sitemap page. If you have any kind of issues you can comment below...