Advertisement

Top 5 level based stylish HTML Sitemap for blogger in 2021? - Chinaitechghana

China iTech Ghana
Sunday, May 9, 2021 | views Last Updated 2021-05-09T22:57:17Z

Hi friends, in this post, I will tell you how to add a stylish HTML sitemap to the blogger website. Before going to know how to add a beautiful HTML Sitemap, you should know the benefits of these sitemap themes. In this post, I will share the top 5 Level based stylish HTML Sitemap for bloggers, and the advantages of these beautiful HTML sitemaps.


Before applying this, you should know all about sitemap. In my previous post, I have shared all information about XML and HTML site map and how to submit one on Google search console.


Features of stylish HTML sitemap

  • Level-based update- each post will be updated, with a level base.
  • Automation: After applying this theme, you don't need to update the new uploaded post. These will updates new uploaded posts automatically.
  • Suffix New: Each sitemap will add the suffix 'New' on the newly added post.
  • Light-weight: made with minimal JavaScript and maximum HTML and CSS.
  • Design: SQL ( Structured Query Language).
  • Responsive.
  • No hidden script.

How to add stylish HTML Sitemap on Blogger

  1. Login to blogger dashboard > and click on Pages>Create a new page (Select your Sitemap page, if you already have one) with the title Sitemap.

 

<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet"> <style type="text/css">     .post-archive {         width: 100%;         padding: 20px 0;         font-family: "Lato", sans-serif;     }         .post-archive h4 {         border-bottom: 2px solid #E3E3E3;         color: #333333;         font-size: 20px;         margin: 0 0 10px 2px;         padding: 0 0 10px;         font-family: "Montserrat", sans-serif;         font-weight: 700;     }         .ct-columns {         -moz-column-count: 2;         -moz-column-gap: 20px;         -moz-column-rule: none;         -webkit-column-count: 2;         -webkit-column-gap: 20px;         -webkit-column-rule: none;         column-count: 2;         column-gap: 20px;         column-rule: none;     }         .ct-columns p {         padding: 5px 0px;         -moz-column-break-inside: avoid;         -webkit-column-break-inside: avoid;         -o-column-break-inside: avoid;         -ms-column-break-inside: avoid;         column-break-inside: avoid;         display: inline-block;         width: 100%;     }         .ct-columns p a {         background: #242424;         color: #fff;         display: block;         border: 2px solid #000;         font-size: 14px;         line-height: normal;         border-radius: 5px;         padding: 10px 15px;         -webkit-transition: all .25s ease-in-out;         -moz-transition: all .25s ease-in-out;         -o-transition: all .25s ease-in-out;         transition: all .25s ease-in-out;     }         .ct-columns p a:hover {         background: #fff;         color: #000;         text-decoration: none;     }         .ct-columns p a span {         color: rgb(255, 0, 0);     }         @media screen and (max-width: 768px) {         .ct-columns {             -moz-column-count: 2;             -moz-column-gap: 10px;             -moz-column-rule: none;             -webkit-column-count: 2;             -webkit-column-gap: 10px;             -webkit-column-rule: none;             column-count: 2;             column-gap: 10px;             column-rule: none;         }     }         @media screen and (max-width: 550px) {         .ct-columns {             -moz-column-count: 1;             -moz-column-gap: 0px;             -moz-column-rule: none;             -webkit-column-count: 1;             -webkit-column-gap: 0px;             -webkit-column-rule: none;             column-count: 1;             column-gap: 0px;             column-rule: none;         }     } </style>
<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>

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <style type="text/css">     .post-archive {         width: 100%;         padding: 20px 0;         font-family: "Lato", sans-serif;     }         .post-archive h4 {         border-bottom: 1px solid #EAEAEA;         color: #333333;         font-size: 20px;         margin: 0 0 10px 2px;         padding: 0px 10px 10px;     }         .ct-columns {         -moz-column-count: 2;         -moz-column-gap: 20px;         -moz-column-rule: none;         -webkit-column-count: 2;         -webkit-column-gap: 20px;         -webkit-column-rule: none;         column-count: 2;         column-gap: 20px;         column-rule: none;     }         .ct-columns p {         padding: 0px;         -moz-column-break-inside: avoid;         -webkit-column-break-inside: avoid;         -o-column-break-inside: avoid;         -ms-column-break-inside: avoid;         column-break-inside: avoid;         display: inline-block;         width: 100%;     }         .ct-columns p a {         color: #0A12CE;         display: block;         font-size: 14px;         line-height: normal;         padding: 0px 15px;     }         .ct-columns p a:hover {         color: #888CDD;     }         .ct-columns p a span {         color: rgb(255, 0, 0);     }         @media screen and (max-width: 768px) {         .ct-columns {             -moz-column-count: 2;             -moz-column-gap: 10px;             -moz-column-rule: none;             -webkit-column-count: 2;             -webkit-column-gap: 10px;             -webkit-column-rule: none;             column-count: 2;             column-gap: 10px;             column-rule: none;         }     }         @media screen and (max-width: 550px) {         .ct-columns {             -moz-column-count: 1;             -moz-column-gap: 0px;             -moz-column-rule: none;             -webkit-column-count: 1;             -webkit-column-gap: 0px;             -webkit-column-rule: none;             column-count: 1;             column-gap: 0px;             column-rule: none;         }     } </style>

You may like these posts

<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>
To apply this sitemap, you should follow all the steps mentioned above.

Now, you have successfully added a new stylish HTML Sitemap to your blog. If you have any questions related to these site maps you can ask freely in the comment section.

Enter Your Email Address to Recieve Our Latest Updates:

Delivered by Chinaitechghana.com

Comments
comments that appear entirely the responsibility of commentators as regulated by the ITE Law
  • Top 5 level based stylish HTML Sitemap for blogger in 2021? - Chinaitechghana

Trending Now

Recents

Advertisement