Blogger

How to Create an HTML Sitemap Page for Blogger Blog

How can you make an easy navigational website? You can create an HTML sitemap for the Blogger blog to make your blog more user friendly.

Blogger has many limitations, in case you like to add some additional features to it, you’ve to tweak with codes like for sitemap, schema markup, etc. But here we have got the solution for this.

Create an HTML sitemap for Blogger blog to enhance the user experience and increase traffic

HTML sitemap for Blogger
HTML sitemap for Blogger

To create a new sitemap page, go to the Blogger dashboard and select create new.

Create New Page Blogger
Create New Page Blogger

Now First of all you’ve to add a title of your page that should be sitemap as displayed below.

Add Title to sitemap page blogger
Add Title to sitemap page Blogger

Now select the HTML View for your Blogger page and paste the below code into your page’s HTML section. And finally, publish the sitemap page of your Blogger Blogspot blog. You can change the values given in the red line of this code.

<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, 15);
                    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="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script> 

Now this page will be look like this

Blogger HTML sitemap page
Blogger HTML sitemap page
  1. Page title.
  2. HTML mode of the page.
  3. Paste the javascript in the HTML section.
  4. Provide search Description, if any.
  5. Allow, disallow comment, etc.

You’ve to follow these steps

  1. Create a New Page for your Blogger Blog.
  2. Add a title for your blog i.e. sitemap.
  3. Paste the javascript in the HTML section of your page.
  4. Publish the page; your sitemap is live now.

Now your HTML sitemap has been successfully published. You can add it to the navigation menu for the better user experience.

This HTML sitemap is only for users, not for search engines. You can submit an XML sitemap for your blogger blog to the search engine console.

I hope you like this article. In case of any doubt, you can comment below. Thank You

Ashok Kumar

Ashok Kumar working in the Search Engine Optimization field since 2015. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on seoneurons.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.

Related Articles

Leave a Reply

Back to top button