How To Add Stylish Sitemap Page In Blogger

How To Add Stylish Sitemap Page In Blogger

Hello, friends in this tutorial we talk about how we can add a stylish sitemap page in blogger in very easy steps.
A sitemap is a very important part of SEO because the search engines read your website sitemap and also index those pages and grow up your ranking, so let's do it.

Method 1: How To Create A Blogger Sitemap Page That Automatically Shows Recent Posts On Top With Bulleted List

First of all, open your blogger dashboard and go to the pages section.
Here create a new page with the name "Sitemap".
Now edit this page using the HTML section (Don't use compose area).
Copy the below code and paste it into the HTML section and save your page. (Remove all extra codes already present in HTML section then paste below codes)
You're done this code will automatically add recently added posts.

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

In this code, you have to put your blog link
ex: yourblog.blogspot.com -----> techfirex.blogspot.com

Let's see the second method,

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

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

Here at the end of the code, you find that yourblog.blogspot.com, replace it with your blog website URL and save it & publish.

See first method sitemap demo here (Which I use in my blog): SiteMap
Thank you.
If you have any suggestions and query then feel free to comment below I will reply as soon as possible.