How to create html Sitemap Page in Blogger

HTML Sitemap

How to Create an HTML Sitemap HTML Sitemap Generally helps website visitors, and visitors can easily read their desired article from the HTML site, which is SEO Friendly for us, I have already added HTML sites to my website.

Below is an image of the HTML Sitemap. Demo

html sitemap

What is a Sitemap Page?

The sitemap is just a simple list of your blog posts which usually helps crawlers and bots to crawl your blog properly. It improves your blog’s crawl speed and also helps in fast indexing of your latest posts. Recently I myself have modified my blog’s sitemap which thou can check here.

Our new sitemap page for the Blogger side all of our blog posts listed in a label categorized manner. So in this post, I will share the code and the system to make one such sitemap page for your blogger blog too.

How to Make Sitemap in Blogger?

I will be keeping it short and easy, just implement it and you will get your sitemap made in just 2 minutes. So here are the steps to create the table of contents page for your blogger.

Step 1. Login Blogger Open your Blogger dashboard and click on Create New Page.

Sitemap in Blogger

Step 2. Now Click on HTML as shown in the image.

Blogger html sitemap


Provide a Name to The page (Sitemap or anything you wish) and Paste the following code in the Html section of the page. Make sure to replace https://www.techjan.com with your blog URL.

NOTE 1: Don’t edit other codes, more They are just the function names. If you edit those, it won’t work.

Note 2: Clear any default code inside the HTML area before pasting the provided 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, 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.yourdomainname.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap”></script>

Note: Dismiss any type of HTTPS error.

Step 3. Configuration
Replace yourblog.blogspot.com with your blog URL.

Step 4. Under on Page settings,> inside Search Description field add page description.

Step 5. Click on The Options > under Reader comments > select Don’t allow > Done.



Blogger html sitemap

Step 6. Click Publish.

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

Happy Blogging!

You have successfully added on HTML based sitemap page on your blog. Place your Site HTML Map page link, wherever you would like to show your Site HTML Map page. You can also apply another theme on this sitemap provided by How bloggers. For any issues related to the following Tutorial Please Comment Below.

2 thoughts on “How to create html Sitemap Page in Blogger”

  1. Thanks you . I think, this is the best information to build up my site.
    I am waiting for more information about build up web site development.
    I visit your site all time and collect information.Excellent and helpful tips, again thanks publisher. .
    TecH NawaZ

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.