How to Create Stylish HTML Sitemap for Blogspot Blogger in 2020

Searching for how to create a stylish HTML sitemap for Blogspot blogger, before that you should know What is Sitemap?

What is a Sitemap?

A sitemap is a collection of all the post URL's that your website is consists of, which means all links connected to your website or other sites show on one page which makes it easier for the bots(Web Crawlers) to crawl your website in the best possible way.

As you know that there are two types of Sitemaps

  1. XML Sitemap
  2. HTML Sitemap

What is XML Sitemap?

XML sitemap help web crawlers (bots) of various search engines to find various links associated with your website or other sites. XML Sitemaps provide a complete guide to web crawlers and get all the information that they need to index.

What is HTML Sitemap?

HTML Sitemap is an organized page available to both the visitors and web crawlers. HTML Sitemap is also a collection of all the post URLs of your website that shows on a static page.

Difference between the XML Sitemap and HTML Sitemap

Friends, there are many differences, but the most important one you should know is that the XML sitemap is considered to be the complete infrastructure of all the links associated with your website whereas the HTML sitemap is considered a simple static page by the web crawler.

Please follow all the steps carefully so that the sitemap page works.

Note: Sitemap Page will be based on "Labels"

How to Create a Stylish Sitemap Page on Blogger

Step 1. Login to the blogger.com

Step 2. After login > Choose "Page" option from the menu option.

Page Option

Step 3. Page > Click the "+" button to create a new page.

Create a new page by clicking plus button

Step 4. Add the title "Sitemap" > Switch to HTML View.

Add Title

Step 5. Copy all the code provided by theloudbuzzers > change the "Website URL" with your URL.

 <div class="tabbed-toc" id="tabbed-toc"></div>  
 <script>  
 var tabbedTOC={blogUrl:"Website URL",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' – <em style="color:red;">New</em>'};  
 </script>  
 <script src="https://cdn.jsdelivr.net/gh/Indzign/InSEO@master/daftarisikeren.js"></script>  
 <style scoped="" type="text/css">  
 .tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite}  
 .tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}  
 .tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}  
 .tabbed-toc .toc-tabs{width:20%;float:left}  
 .tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}  
 .tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}  
 .tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}  
 .tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}  
 .tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}  
 .tabbed-toc .panel{position:relative;z-index:5}  
 .tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}  
 .tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right}  
 .tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}  
 .tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}  
 .tabbed-toc .panel li{background-color:#f9f9f9;margin:0}  
 .tabbed-toc .panel li:nth-child(even){background-color:#fff}  
 .tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}  
 .tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}  
 .tabbed-toc .panel li:before{display:none}  
 .nightmode .tabbed-toc .toc-content,.nightmode .tabbed-toc .toc-line{background-color:rgba(0,0,0,0.1)}  
 .nightmode .tabbed-toc{background:rgba(0,0,0,0.1)}  
 .nightmode .tabbed-toc .panel li{background:rgba(255,255,255,.05)}  
 .nightmode .tabbed-toc .panel li:nth-child(even){background:rgba(255,255,255,.1)}  
 @-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}  
 @-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}  
 @keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}  
 @media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:left}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}  
 </style>  

Copy Code and Change Website URL

Step 6. go to "Page Settings" > Options > Choose "Do not allow, hide existing.

Page Settings

Step 7. Click the "Publish" button to see the changes.

Sitemap Demo

That's it, you had successfully created the HTML Sitemap page for your blogger website.

Also Read: Best Free Blogger Templates For Lyrics Website

If you want a simple Sitemap then follow all the steps up to 4 and copy the second code > paste it.

Simple Sitemap 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.website.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script>  
Demo/preview/button

Last thing to do change "website.blogspot.com" with your URL.

Great Job You Did it!

Conclusion

Hopefully, these scripts work if there is an error please leave a comment below. I tried both of them and they worked 100% in all themes. if you like the article How to Create Stylish HTML Sitemap for Blogspot Blogger in 2020 and want to read more like this please subscribe to our youtube and newsletter for daily updates.

1 Comments

Sharing is Caring. Please comment if you like our articles.

Post a Comment

Sharing is Caring. Please comment if you like our articles.

Previous Post Next Post