Add A Nice HTML Sitemap Page To Blogger Blog

Thank you for landing here! If you are here, it means that you want to add an HTML Sitemap page to blogger blog. I must be quick to let you know that you should not confuse an HTML Sitemap with an XML Sitemap. An HTML Sitmap is different from and XML Sitmap. Continue reading and find out!

In this BlogSpot tutorial, I have explained what a sitemap is, what an HTML and XML sitemap is and the difference that exist between them. Again the benefits of sitemap page has been highlighted and finally the tutorial itself, how to add an HTML Sitemap page for blogger blog.

What Is A Sitemap? What Does Site Map mean?

A site map is a list of pages of a web site. A site map is a model of a website's content designed to help both users and search engines navigate the site. A site map is a visual or textually organized model of a Web site's content that allows the users to navigate through the site to find the information they are looking for, just as a traditional geographical map helps people find places they are looking for in the real world. 

A site map is a kind of interactive table of contents, in which each listed item links directly to its counterpart sections of the Web site. Site maps perform the same service that the layout maps in large shopping malls perform: without them, it is possible to explore a complex site by trial and error, but if you want to be sure to find what you're looking for, the most efficient way to do that is to consult a model of the resources available.

Typically, site maps are organized hierarchically, breaking down the Web site's information into increasingly specific subject areas. Many sites have user-visible sitemaps that present a systematic view, typically hierarchical, of the site. These are intended to help visitors find specific pages, and can also be used by crawlers. Alphabetically organized site maps, sometimes called site indexes, are a different approach. 

When the site map is for users, it's just a plain HTML file with a listing of all the major pages on a site. This is what this tutorial is about.

What Is HTML Sitemap?

HTML sitemap is a regular HTML page that can be read by search engine bots as well as by visitors. The main purpose of 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. HTML sitemaps ostensibly serve website visitors.

The sitemaps include every page on the website – from the main pages to lower-level pages. An HTML sitemap is just a clickable list of pages on a website. This is what this tutorial is about, we're going to add an HTML sitemap page for blogger blog, I shall give you two codes to choose from, and if you like you can use both.

What Is An 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 an XML file attached to your website which supplies this data to crawlers. The 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 Build And Maintain A Healthy Relationship [16 Top Tips]
• How To Find Out If She Loves You: 10 Signs She Loves You
• How to Make Your Girl Happy(15 Tips and Helpful Insights)

The Difference Between HTML And XML Sitemap

HTML sitemap is totally different from the XML sitemap. As a blogger, we submit to search engine XML Sitemap for improving on crawling rate or get quick indexing of our new blog post. HTML Sitemap shows a nicely organized of your published post on a page. This tutorial is geared toward how to add an HTML Sitemap Page to Blogger Blog. There are two styles that we shall look at, so continue!

Benefits Of A Sitemap To Users And Search Engines

Benefits Of A Sitemap To Users

The user benefits from sitemap because they can go and if they can’t find a page of your site through the main navigation they can actually, go and look at your sitemap and possibly find the information there. If you have a large site, using a sitemap can actually break down your site into smaller sections by categories or alphabetically, labels, authors, etc. So, creating a sitemap for your site is very beneficial for your users in helping them to find information on your site.

Benefits Of A Sitemap To Search Engine

Search engines can go and crawl your sitemap and find all the different pages of your site. So, it will help your site get indexed and also for SEO purposes in order to help certain page rankings.

Code 1: How To Add An HTML Sitemap Page To Blogger Blog

That Automatically Shows Recent Posts On Top With Bulleted List

Features:

• The Post links are beautifully bulleted
• The recent posts come first
• Sitemap Page very neat

Step 1: Go To Blogger Dashboard>>Pages>>New Page

Once you click on "new page" you'll indeed land on a new page

Step 2: Enter "Site Map" or "Table Of Content" or anything suitable for you in the Page title field.

Step 3: Switch to HTML mode

Click on the drop down arrow near the pencil like object and switch to HTML view

Step 4: Now, if you switch to HTML View and you notice that there some codes on the page, kindly clear it all!

Step 5: Now copy and paste the below code and paste it on the page

<script type="text/javascript">   var numposts = 500; var standardstyling = true;   function showrecentposts(json) {  for (var i = 0; i < numposts; i++) {   var entry = json.feed.entry[i];   var posttitle = entry.title.$t;   var posturl;   if (i == json.feed.entry.length) break;   for (var k = 0; k < entry.link.length; k++) {    if (entry.link[k].rel == 'alternate') {     posturl = entry.link[k].href;     break;    }   }   posttitle = posttitle.link(posturl);   if (standardstyling) document.write('<li>');   document.write(posttitle);  }   if (standardstyling) document.write('</li>'); }</script> <br /><ul> <script src="https://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ul>

Step 6: Note: Do not forget to change https://yourblog.blogspot.com in the code with your real blog's URL

If your blog posts are more than 500, change var numposts = 500 to var numposts = 1000

Step 7: Under Page settings,> Click on Description field and add page description (You can decide not to give any search description. Note: some Blogger themes these days don't have descriptions on the pages page. Click on Options > under Reader comments > select Don't allow, hide existing.

If you do not see your sitemap page on your blogsite, it means you have not added it to your pages gadget.
Step 8: On your blogger dashboard go to Layout>>Add a Gadget, under the "Cross-column. Add Pages Gadget at the cross column just under the "header " see the infographic below for more information.

Step 9: When you click on "Add a Gadget from step 8, a window will pop up, scroll down till you find the "Pages" Gadget among the list of Gadgets, click on the + sign at the extreme right of it.

Step 10: Page configuration. Another window will pop up from step 9 above, Check the checkbox for all the pages you would like to show on your blogger blog. Save and that is it! Go to your blog and click on sitemap or whatever name you've given it, you'll have a beautiful sitemap.
Note: If you've already added Pages Gadget to your blog, Go to  Layout>>Edit the Pages Gadget that you've already added and configure it as below, check the checkbox beside the Sitemap and save. You're done!! 

You are done!. Now, view your new sitemap page and see how it is.

Code 2: How To Add An HTML Sitemap Page To Blogger Blog

If you do not like the style in code one, then you may use this code below

Features:

• Blog Post list will update automatically with the addition of new posts.
• Automatic addition of Suffix 'new' to newly added posts.
• Sorted by labels and alphabetically (ascending)
• Use the steps outlined in code 1 and implement it

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

Now scroll to the new bottom of the code and change https://yourblog.blogspot.com to your real blog URL