When a blog site is maintained, it adds a number of posts to it.Over time, a lot of posts are added.So it's important if you bring all the articles into one page.Therefore, this sitemap is important for your site audience.
When a blog site is maintained, it adds a number of posts to it.Over time, a lot of posts are added.So it's important if you bring all the articles into one page.Therefore, this sitemap is important for your site audience.This is important for a new person to your site looking for all the articles at once.You know about how to submit XML sitemap to Google Search Console. But that sitemap is for those crawlers to update about your blog on search engines. Here, we will guide you to make a simple sitemap page (a HTML page) for your blogger blog, which lists all your published posts according to your Labels.
You can enter all your articles for this sitemap page.At the same time, you do not need to update it again and again.Once you publish a new article on the blog, it is on that page.So you can maintain that page without any trouble.Even if someone new comes to your site, your old article can easily be found.And because of the code that we provide, the article has a different look, depending on the label given to you.If so, let's see how this is done for your site.
Creating a HTML Sitemap Page for a Blogger
1. First, go to blogger.com and go to your Dashboard.
2.The next step is to go to the pages tab and click New Page.
3. On the Page Title, Just name it as Sitemap which would make you a page like example.com/p/sitemap.html.One important step is, click on the Options on right side of the page and select Do not allow Comments option (It looks like a professional sitemap page if comments are disabled).
4.Click on HTML Editor (by default, it would be on Compose mode) and remove all the codes if present.Then copy the following code here & pase 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.Yourdomain.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>]
5.Then apply the URL of your site to Yourdomain.com in the code above.
6.Finally publish your page.
Additional customization.
if you want to number of posts to display, The following code can be used for that.For example, if you want to display the post 100, For that, change the number of numposts in the code.
[<script type="text/javascript">/*<![CDATA[*/var numposts=100;var standardstyling=true;function showrecentposts(e){for(var d=0;d<numposts;d++){var f=e.feed.entry[d];var c=f.title.$t;var b;if(d==e.feed.entry.length){break}for(var a=0;a<f.link.length;a++){if(f.link[a].rel=="alternate"){b=f.link[a].href;break}}c=c.link(b);if(standardstyling){document.write("<li>")}document.write(c)}if(standardstyling){document.write("</li>")}};/*]]>*/</script><br /><ul><script src="https://www.Yourdomain.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ul>]
Then apply the URL of your site to Yourdomain.com in the code above.
The Index of the posts are arranged alphabetically and the new posts get updated automatically to the sitemap as it gets published on your blog.
So you know about How to Create HTML Sitemap Page for Blogger, Hope you like the post, don’t forget to share it with your friends and leave a comment below if you are facing any problem at any step in the method discussed above.Thank you.
COMMENTS