How To Create HTML Sitemap Page In Blogger (With Infographics)

Hello! Welcome to another blogger blog tutorial, in this the tutorial we will create a sitemap page for our blogger blog. It is just unfortunate that Blogger does not have any widgets for sitemap as compared to WordPress which has a plugin called “Yoast SEO” which automatically creates and updates the website sitemap. 

In this tutorial, We shall create a blogger HTML sitemap page Sorted by post label, in alphabetical order and attribute “New” to those post freshly published, as another wonderful style, we shall Create a Grid View Sitemap Page for Blogger and last but not least, we shall create a sitemap page sorted in reverse order, newest posts and articles on top. Choose the one that is best for you. Before going forward to add Sitemap page it is very important to know the benefits of sitemap and the difference between HTML sitemap and XML sitemap thereof.

Table Of Content

1. Introduction
2. What Is A Sitemap
3. The 3 Primary Kinds Of Sitemap
4. The Difference Between HTML AND XML Sitemap
5. Benefits Of A Sitemap
6. How To Create HTML Sitemap Page In Blogger Blog Step By Step, 3 Styles given

What Others Are Reading:

How To Add Breadcrumbs Post Navigation In Blogger Step By Step 

How To Add Custom Robots.txt File In Blogger Step By Step 

How To Add Related Post With Thumbnails In Blogger Step By Step - 3 Steps 

How To Add Twitter Cards To Blogger And Wordpress Step By Step 

How To Create A Blog On Blogger.com (Blogspot) Step By Step 

How To Set Custom Header Tags For Blogger Blog Step By Step - 4 Steps

How To Underline Links In Blogger Blog Step By Step - 2 Steps

What Is A Sitemap? What Does Site Map mean?

A site map (or sitemap) 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. There are a number of different types of site maps: organizational chart site maps are quite similar in appearance to a traditional table of contents; others, based on a perspective view of the site, are like a three dimensional model with individual pages upright, like index cards, arranged in sections and linked by lines.

There are three primary kinds of site map:

1. Site maps used during the planning of a Web site by its designers
2. Human-visible listings, typically hierarchical, of the pages on a site
3. Structured listings intended for web crawlers such as search engines

HTML And XML Sitemaps And The Difference

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 create an HTML sitemap page for our blogger blog, I shall give you 3 wonderful styles to choose from.

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

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 create HTML Sitemap Page For Blogger Blog. There are many 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.

How To Create HTML Sitemap Page In Blogger Blog Step By Step With Infographics Given

I am going to give you 3 different styles, the one that is best for you, you choose. 

STYLE 1:How To Create A Blogger HTML Sitemap Page Sorted By Posts Labels, In Alphabetical Order And Attribute “New” To Those Post Freshly Published

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)

Step 1: Go To Blogger Dashboard>>Pages>>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

Step 4: Enter the following codes inside the blank field.
Note: Clear any default code inside the HTML field before pasting the provided code below, if there are some.

Note: Dismiss any type of errors.

Step 5. Configuration
- Replace http://www.yourblog.blogspot.com with your blog URL. If your blog URL is http make sure it's http in the code and if it's https make sure it's https in the code, okay! Just copy your blog URL and replace the one in the red in the code given below, as simple as that.

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

Step 6: Under Page settings,> Click on "Options" inside Search Description field add page description. Note: some Blogger themes these days don't have descriptions on the pages page.
Step 7: Click on Options > under Reader comments > select Don't allow > Done.

If you've not added "Pages" Gadget to your blog, then proceed to step 8 Below. But if you've already added Pages Gadget to your blog, jump to Step 10.
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!! 

See mine below, not on this blog you're reading but it's from a Demo Blog I'm using for this tutorials, isn't it nice? See this sitemap here on this blog: Sitemap 

STYLE 2: How To Create A Blogger Sitemap Page That Shows Grid Images Of Your Blogger Post

Features:

• Grid images of your Blogger posts are shown
• This Grid view sitemap widget is responsive
• Automatically sort your posts by Recent Posts, Date, Label, and Author

Follow all the steps under STYLE 1, and implement it, the code is below

<style type="text/css">   .grid-sitemap {    overflow: hidden;    position: relative;    height: 565px;    margin: 20px 0 40px 0;   }   .grid-sitemap iframe {     display: block;     width: 100%;     height: 680px;     margin-top: -115px;     margin-left: -5px;   }   </style>   <div class="grid-sitemap">    <iframe src="https://www.yourblog.blogspot.com/view/flipcard"></iframe>   </div>  

Note: Do not forget to change https://www.yourblog.blogspot.com in the code with your real blog's URL. You are done!. Now, view your new sitemap page and click on different sections in order to see your sitemap with different categories. See below how it looks like!
See this sitemap on my blog, I mean this one you are reading: Grid View Sitemap

STYLE 3: How To Create A Blogger Sitemap Page 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

Follow all the steps under STYLE 1, and implement it, the code is below

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

Note: Do not forget to change https://www.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 You are done!. Now, view your new sitemap page and see how it is. See how it looks like below!
See this type of Sitemap on my blog, this very blog: Sitemap List View

You may go to the bottom of this page and see all my sitemaps, I used the same codes!

If you follow the tutorial strictly, I don't think you'll encounter any issues, however, if you encounter issues, comment it at the comment section below and I will attend to you! Happy blogging! And don't forget to share, thanks!
full-width