Easiest Method to Create Your HTML Based Sitemap Page in Blogger Blog or Display Your Posts List in Table Form.

How to Generate HTML Sitemap Page on Blogger

Updated on: May 06, 2019

Before going forward to add Sitemap page it is very important to understand the difference between HTML sitemap and XML sitemap.

What is XML Sitemap?

Actually, the Search engine uses their respective web crawlers (bots) to discover pages from links within the site and from other sites. XML Sitemap is a .xml file attached to your website which supplies this data to crawlers. Sitemap file consists of all posts URL with additional information regarding each URL. The Search engine uses this data to index your posts in the best possible way. Use of XML Sitemap file guarantees that your web pages will get indexed in search engines.

How to Generate HTML Sitemap Page on Blogger

How to add and submit an XML sitemap to google and other search engines

What is HTML Sitemap?

HTML sitemap is a regular HTML page which can be read by search engine bots as well as by visitors. Web crawler treats it like a regular HTML page (with many links). The main purpose of the using HTML based sitemap is to represent all your posts in an organized manner so that your users can navigate all of your posts through a single page.

Features

- Post list will update automatically with the addition of new posts.
- Automatic addition of Suffix 'new' to newly added posts.
- Sorted alphabetically (ascending)

How to add sitemap page in blogger

Note: This is Label Based Sitemap Page and you can only apply label based themes on it.

Step 1. Login to your Blogger account, then go to Pages > New page.

Create HTML based Sitemap Page on Blogger

Step 2. Enter "Site Map" in Page title field.

Step 3. Switch to HTML mode.

How to add sitemap in blogger

Step 4. Enter following inside blank field.

Note: Clear any default code inside HTML field before pasting provided code.

Read: How to Automatically Remove Default Code from Blogger's Writing Panel

<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>

Note: Dismiss any type of HTTPS errors.

Step 5. Configuration

- Replace yourblog.blogspot.com with your blog URL.


Step 6. Under Page settings > inside Search Description field add page description.

Step 7. Click on Options > under Reader comments > select Don't allow > Done.

Automatically updating tabular list of posts for blogspot

Step 8. Click Publish.

Note: This tutorial is only about to add Simple HTML Sitemap. You can apply different colorful themes on this sitemap.

Read: Themes of HTML Sitemap Page - Label based (SEQL)

Happy Blogging!

You have successfully added an HTML based sitemap page on your blog. Place your Site Map page link, wherever you would like to show your Site Map page. You can also apply different themes on this sitemap provided by Howbloggerz. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz! :)

Love it? Don't forget to Subscribe
  • Srikanth Eswaran
    Srikanth Eswaran
    17 August 2017 at 12:44
    This is not working for me
  • Srikanth Eswaran
    Srikanth Eswaran
    17 August 2017 at 12:45
    in chrome your own sitemap does not load: http://www.howbloggerz.com/p/sitemap.html
    Saurabh Jarial
    Saurabh Jarial
    18 August 2017 at 12:55
    Hi Srikanth

    Everything is working fine from my end (your sitemap too), in chrome as well as in Firefox.

    Make sure that your browser is updated and javascript are enabled.
  • Unknown
    Unknown
    6 September 2017 at 16:49
    Showing null
    Saurabh Jarial
    Saurabh Jarial
    11 September 2017 at 22:39
    Contact us via contact form and elaborate your problem.
  • Unknown
    Unknown
    22 September 2017 at 14:04
    Thanks very much, my dearest :)
  • MsTharoj
    MsTharoj
    22 November 2017 at 00:38
    Working. Many thanks....
    Saurabh Jarial
    Saurabh Jarial
    4 December 2017 at 21:48
    Happy blogging Tharoj MS
  • Unknown
    Unknown
    2 December 2017 at 08:29
    Hello sir, it's not work, you can help me?

    http://tukanglistrikpulaubatam.blogspot.co.id/p/site-maps.html
    Saurabh Jarial
    Saurabh Jarial
    4 December 2017 at 22:02
    Hello Abdul, Follow the above steps carefully. If still it doesn't work then contact me via contact form link in menu bar.
  • Unknown
    Unknown
    21 February 2018 at 17:46
    hello sir it working but not showing all post why
    Saurabh Jarial
    Saurabh Jarial
    23 February 2018 at 22:19
    Please contact me via contact form and do mention your blog address.
  • Yadwinder Singh
    Yadwinder Singh
    28 February 2018 at 14:26
    THANKS BROTHER, THIS POST IS VERY HELPFULL FOR ME. I HAVE A QUESTION , I AM A HINDI BLOGGER AND I WANT WRITE A HINDI POST ON HTML SITEMAP ,CAN I USE YOUR HTML CODING FOR MY BLOG POST.PLEASE TELL THAT.
    Saurabh Jarial
    Saurabh Jarial
    28 February 2018 at 14:39
    Sure!
    But please link it back to this orignal post.
  • Yadwinder Singh
    Yadwinder Singh
    28 February 2018 at 18:13
    thanks brother for give me permission . i add you post link in in my blog post which i write on html sitemap
  • INVHO.com
    INVHO.com
    1 March 2018 at 14:45
    Hi. Not work..
    Can u help?
    Saurabh Jarial
    Saurabh Jarial
    3 March 2018 at 12:58
    Simply COPY & PASTE the code from this text file to your SITEMAP Page.
    I hope this will help you.
  • justin
    justin
    8 March 2018 at 14:20
    I finally make it work !! If its blank try settings>other>allow blog feed chances are its set to none, change it to full and it will show up\(^A^)/
  • Sachin
    Sachin
    4 June 2018 at 09:45
    bro can we also change the HTTP to HTTPS.
    Saurabh Jarial
    Saurabh Jarial
    14 June 2018 at 17:31
    No issue! You can.
  • JD Ahmad
    JD Ahmad
    5 June 2018 at 09:19
    This is very help full post
  • Ardi
    Ardi
    14 June 2018 at 21:26
    thank you, I am recently looking a simple sitemap to be implemented on my blog. Finally, your guide is very suitable with my blog
    Saurabh Jarial
    Saurabh Jarial
    15 June 2018 at 19:54
    Thank you buddy!
  • ShaMals
    ShaMals
    25 July 2018 at 18:07
    Works like a charm, thkq
  • Unknown
    Unknown
    14 September 2018 at 16:01
    Very awesome article
    Saurabh Jarial
    Saurabh Jarial
    30 September 2018 at 09:34
    Thank you!
  • Hollington
    Hollington
    14 September 2018 at 18:22
    It works, thanks man
    Saurabh Jarial
    Saurabh Jarial
    30 September 2018 at 09:35
    My pleasure, buddy
  • Bilgrami World
    Bilgrami World
    19 October 2018 at 16:05
    Tried but page is showing blank. Java Script already enable for site. Using Apriezt Blogger theme. Please help
    Saurabh Jarial
    Saurabh Jarial
    6 May 2019 at 05:24
    *POST UPDATED* Please try again.
  • Bilgrami World
    Bilgrami World
    19 October 2018 at 16:11
    Follow the same instructions on Apriezt but showing blank white page. Any solution?
    Saurabh Jarial
    Saurabh Jarial
    23 October 2018 at 00:43
    Contact me via contact form and do mention your sitemap page url.
  • Manish Kumar
    Manish Kumar
    16 December 2018 at 22:16
    Thanks brother. Worked like a charm for me.
  • mrdeuteron
    mrdeuteron
    21 December 2018 at 23:36
    Not working Showing blank page
    Saurabh Jarial
    Saurabh Jarial
    6 May 2019 at 05:23
    *POST UPDATED* Please try again.
  • TimHexa
    TimHexa
    30 December 2018 at 12:51
    Hi, good post. But your demo link aint working on my browser. I've been tried to visit your link in every browser.

    Can you make a sitemap like this post? Sorted by post label, i really want it. But don't know how to make it.

    https://timhexa.blogspot.com/p/sitemap.html
    Saurabh Jarial
    Saurabh Jarial
    6 May 2019 at 05:22
    *POST UPDATED* Please try again.
  • DopeArena
    DopeArena
    10 January 2019 at 08:14
    thanks
  • go-program
    go-program
    21 January 2019 at 13:52
    Thanks dear bro i create my blog sitemap
  • Roshni Raturi
    Roshni Raturi
    24 February 2019 at 02:59
    not working at all
    Saurabh Jarial
    Saurabh Jarial
    6 May 2019 at 05:21
    *POST UPDATED* Please try again.
  • SUNIL MOGA
    SUNIL MOGA
    10 March 2019 at 21:23
    thanks brother
    Saurabh Jarial
    Saurabh Jarial
    4 May 2019 at 12:00
    Have a great day bro!
  • Previous Papers
    Previous Papers
    18 April 2019 at 10:17
    can we submit this sitemap on web master tools (search console) ?
    Saurabh Jarial
    Saurabh Jarial
    24 April 2019 at 16:49
    No! This is for demonstration only.
    Check this: How to submit sitemap to Search Console
  • Ankit Raj
    Ankit Raj
    21 April 2019 at 11:50
    sir my blog address https://tactfulfact.blogspot.com/p/sitemap.html
    why it is not showing anything here.? I have followed your all steps carefully. Please help
    Saurabh Jarial
    Saurabh Jarial
    6 May 2019 at 05:21
    *POST UPDATED* Please try again.
  • KienFo
    KienFo
    6 May 2019 at 11:12
    It works for me. Thank for sharing. In step 7, I am still keep allow reader comments in my blog.
    Saurabh Jarial
    Saurabh Jarial
    6 May 2019 at 11:15
    No worries, It's all your choice. :)
  • The Facts File
    The Facts File
    6 May 2019 at 18:47
    Thank you so so so much..i has been tried for last 5-6 days from different blogger's post, finally i got ur post i my work is done. one more time thank you very much. God bless you bro
    Saurabh Jarial
    Saurabh Jarial
    8 May 2019 at 15:30
    Thank You!
  • kidtod
    kidtod
    18 June 2019 at 20:00
    many thanks it's working
  • kulyowm
    kulyowm
    26 July 2019 at 22:08
    Hi dear. i was screening your website today for sitemap.i am fully satiesfied. if you dont mind may i know your template name.and the second thing please can you help me for sitemap widget in blogger. Hope you reply.
    Saurabh Jarial
    Saurabh Jarial
    31 July 2019 at 16:24
    It's a modified version of zett theme by chandeep
  • Abdur Rahman
    Abdur Rahman
    30 July 2019 at 16:31
    Thank You bro its work
  • Van Dewey Balao
    Van Dewey Balao
    2 August 2019 at 04:53
    Hello Jarial, which part of the code where I can edit to only show my preferred labels? Thank you as usual for your help.
    Saurabh Jarial
    Saurabh Jarial
    18 August 2019 at 20:37
    Hello, There are two methods to get desired results. Either my editing script (Complicated) or by using CSS (Easy but still you have a do little work on script). If you have a little bit knowledge regarding Javascript and CSS then use can add a new class with name of the label in each list then save it. Now use CSS to hide the undesired list by using class, which is a label name itself...

    OR just contact me via contact form :)

    Thanks
  • Shelly
    Shelly
    16 August 2019 at 10:36
    Thank you for sharing! It works very well.

    One question.
    I notice the sitemap doesn't show all the post under my label. I think those are older post. Is that normal?
    Saurabh Jarial
    Saurabh Jarial
    18 August 2019 at 20:55
    The script limits the total no. of posts to 9999. I hope you don't have more than that :)
  • elhabi
    elhabi
    19 October 2019 at 17:15
    thanks bro
  • Shayarizuban
    Shayarizuban
    15 November 2019 at 16:51
    Thank you very much sir
  • Rajesh
    Rajesh
    13 December 2019 at 18:30
    It works for me. Thank for sharing. :)
  • Unknown
    Unknown
    3 January 2020 at 09:43
    Thanks
  • Abhishek Kumar
    Abhishek Kumar
    20 March 2020 at 12:03
    Thanks 😊😘
  • Jay
    Jay
    25 March 2020 at 18:19
    Working fine, Thanks!
  • Articlespoetry2you
    Articlespoetry2you
    18 April 2020 at 15:06
    thank you very much it us very useful!
  • mod
    mod
    30 April 2020 at 11:42
    thnx
  • IT Admin
    IT Admin
    19 May 2020 at 08:42
    i was trying to find out this html code and finally i found it here now let me try this code
  • A24M
    A24M
    30 May 2020 at 12:06
    its working fine, thanks for information
  • Jon Snow
    Jon Snow
    13 June 2020 at 21:20
    It only showing last 150 posts on my blog. How to get all of them?
    Saurabh Jarial
    Saurabh Jarial
    14 July 2020 at 21:43
    Everything seems fine. Are you still facing issue?
  • Md. Habibur Rahman
    Md. Habibur Rahman
    23 July 2020 at 21:02
    Thanks admin Jarial.
  • Fuma
    Fuma
    27 July 2020 at 12:16
    It works. Thank you!
  • Engineer
    Engineer
    16 September 2020 at 20:50
    IT WORKING MY BLOG BRO. THANK YOU
  • ANKIT DALAL
    ANKIT DALAL
    3 October 2020 at 17:26
    Admin sir thanks a lot for code but this code is not working for amp page can u make other code that will work for amp theme also sir.
    Saurabh Jarial
    Saurabh Jarial
    9 October 2020 at 20:09
    Sure!
  • Tahir Afaqi
    Tahir Afaqi
    13 October 2020 at 18:53
    Thanks Working after updating allow blog feed
  • साईट एडमिन
    साईट एडमिन
    11 February 2021 at 11:19
    Thanks, working fine
  • Aditya G
    Aditya G
    12 April 2021 at 13:37
    Thank You Sir