TOP 6 SITEMAP DESIGNS FOR BLOGGER BEST SITEMAPS AND FREE TO USE SITEMAPS WITH SCRIPT AND PREVIEW LIVE DEMO

vào
Third tutorial must be followed by blogger users only. We will create seperate article for WordPress users.

What is an HTML Sitemap Page?

An HTML (Hyper-Text Markup Language) Sitemap Page is a .html webpage, created for all published contents organized by labels, dates, or topics. It helps users navigate through the contents simply. As an example, you can check the Sitemap Page of our blog to seek out all published articles and pages organized by labels. Isn’t that cool? Today I’ll share a simple trick to add a beautiful & Stylish HTML Sitemap page to blogger. Just Read the Article through the end Carefully.

Features of these Premium HTML Sitemap Page

  • Lists articles based on labels.
  • Automatically adds "New" tag to latest articles.
  • Labels are neatly separated.
  • A lightweight Javascript was used.
  • Beautiful color combination.
  • Articles are numbered automatically on each label.
  • Easy for users to find the posts by label, date, Etc.
  • Sorted alphabetically (A to Z).
  • Level-based update- each post can be updated, with a level base update.
  • Automation: once applying this theme, you do not ought to update the new uploaded post.
  • Suffix New: every sitemap can add the suffix 'New' on the freshly supplemental Post.
  • Light-weight: created with borderline JavaScript and most HTML language and CSS.
  • Design: SQL ( Structured Query Language).
  • Responsive.
  • No hidden script.

How to add HTML Sitemap Page to blogger?

Note
You have to follow all the steps mentioned below, To successfully apply this HTML Sitemap.

First of all, we'll turn out or produce a sitemap page from the blogger dashboard, and later we'll add the codes to the page.

Step 1: Produce or Create a HTML Sitemap Page On Your Blog

Go to Blogger > Pages > New Page and Enter the title "Sitemap". In the right menu of the page Click on Options, and in the Reader Comments select Do not allow, hide existing.

1. Colorful Sitemap




Code


/**  
 * BLOGGER SITEMAP WITH ACCORDION EFFECT (SORT BY LABEL)  
 * ---------------------------------------------------  
 * Modified by anand
 * URL: https://www.anandnawal.com 
 * ---------------------------------------------------  
 */

<div dir="ltr" style="text-align: left;" trbidi="on">  
<style type="text/css">  
.an-sitemap {  
    background-color: #222;  
    color: #ddd;  
    font-family: Verdana,Geneva,Tahoma,Arial,Sans-serif;  
    font-size: 16px;  
    font-weight: 410;  
    overflow: hidden;  
    border-radius: 5px;  
    box-shadow: 0 0 9px rgba(0,0,0,.1);  
}  
.an-sitemap .toc-header {  
    color: #fff;  
    font-family: inherit;  
    font-weight: 410;  
    font-size: 16px;  
    background-color: #1A1B1E;  
    margin: 0;  
    padding: 13px;  
    overflow: hidden;  
    cursor: pointer;  
    border-top: 1px solid #5c5c5c;  
    border-bottom: 1px solid #5c5c5c;  
    transition: initial;  
}  
.an-sitemap .toc-header:hover {  
    background: rgb(0,52,52);  
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(3,106,30,1) 38%, rgba(0,182,182,1) 100%);  
}  
.an-sitemap .toc-header:before {  
    content: '';  
    width: 0;  
    height: 0;  
    position: relative;  
    float:right;  
    top: 10px;  
    right: 10px;  
    border: 5px solid transparent;  
    border-color: #aaa transparent transparent;  
    transition: all .3s ease;  
}  
.an-sitemap .toc-header.active {  
    background: #1a1b1e;  
    color: #fff;  
}  
.an-sitemap .toc-header.active:before {  
    border-color: #fff transparent transparent;  
    top: 5px;  
    -webkit-transform: rotateundefined-180deg);  
    -moz-transform: rotateundefined-180deg);  
    -ms-transform: rotateundefined-180deg);  
    -o-transform: rotateundefined-180deg);  
    transform: rotateundefined-180deg);  
}  
.an-sitemap .loading {  
    display: block;  
    padding: 14px;  
    text-decoration: blink;  
}  
.an-sitemap ol {  
    margin: 0;  
    padding: 0;  
    list-style: none;  
    transition: initial;  
}  
.an-sitemap li {  
    counter-increment: step-counter;  
    line-height: normal!important;  
    margin: 0!important;  
    padding: 7px 7px 7px 16px!important;  
    white-space: nowrap;  
    text-align: left;  
    overflow: hidden;  
    transition: initial;  
}  
.an-sitemap li:first-child {  
    background: rgb(0,52,52);  
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}  
.an-sitemap li:nth-child(2n) {  
    background: rgb(71,62,62);  
    background: linear-gradient(90deg, rgba(71,62,62,1) 19%, rgba(0,0,0,1) 38%, rgba(0,52,52,1) 100%);}  
.an-sitemap li:nth-child(2n+3) {  
    background: rgb(0,52,52);  
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}  
  
.an-sitemap li::before {  
    content: counter(step-counter)'.';  
    margin-right: 5px;  
}  
.an-sitemap a {  
    color: #fff!important;  
    text-decoration: none;  
    font-size: 90%;  
    transition: initial;  
    font-weight:normal!important;  
}  
.an-sitemap a:visited {  
    color: #fff!important;  
    transition: initial;  
}  
.an-sitemap a:hover,.an-sitemap a:visited:hover {  
    color: #fff!important;  
    text-decoration: underline!important;  
    transition: initial;  
}  
</style>  
  
<div class="an-sitemap" id="an-sitemap">  
<span class="loading">Sitemap Loading..</span>  
<script type="text/javascript">  
var toc_config = {  
 url: 'https://www.anandnawal.com',  
 containerId: 'an-sitemap',  
 showNew: 12,  
 newText: ' <strong style="font-weight:normal;font-style:normal;color:#000;font-size:11px;background:#fff000;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">New!</strong>',  
 sortAlphabetically: {  
  thePanel: true,  
  theList: true  
 },  
 maxResults: 9999,  
 slideSpeed: {  
  down: 400,  
  up: 400  
 },  
 slideEasing: {  
  down: null,  
  up: null  
 },  
 slideCallback: {  
  down: function() {},  
  up: function() {}  
 },  
 clickCallback: function() {},  
 jsonCallback: '_toc',  
 delayLoading: 0  
};  
</script>  
<script src="https://amanbhattarai4400.github.io/twistblogg/sitemap.js" type="text/javascript"></script>
  <script language=javascript>
</div>  
</div>

2. Eye-Catching Sitemap




Code


/**  
 * HTML Sitemap For Blogger 2022 
 * ---------------------------------------------------  
 * Modified by anand
 * URL: https://www.anandnawal.com 
 * ---------------------------------------------------  
 */
<div id="tabbed-toc"> <span class="loading">Loading,  
please wait for a moment...</span></div> <br /> <script type="text/javascript"> var tabbedTOC= {  
    blogUrl: "https://www.anandnawal.com",  
    containerId: "tabbed-toc", 
    activeTab: 1,   
    showDates: false, 
    showSummaries: false, 
    numChars: 200, // Number of summary chars  
    showThumbnails: false, 
    thumbSize: 40,  
    noThumb: "", 
    monthNames: [ 
    "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], newTabLink: true,   
    maxResults: 99999,   
    preload: 0,  
    sortAlphabetically: true, // `false` to sort posts by published date  
    showNew: 7,   
    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color:  #F00;'>New!</em>"   
}  
;  
</script> 
<script src="https://amanbhattarai4400.github.io/csshosting//sitemap_javascript.js" type="text/javascript"></script> 
<style type="text/css">  
/*Sitemap  */ 
#tabbed-toc {  
    width: 99%;  
    margin: 0 auto;  
    overflow: hidden !important;  
    position: relative;  
    color: #222;  
    border: 0;  
    border-top: 5px solid #FC0204;  
    background-color: #1D1D1D;  
    -webkit-transition: all 0.4s ease-in-out;  
}  
  
#tabbed-toc .loading {  
    display: block;  
    padding: 5px 15px;  
    font: normal bold 11px Arial, Sans-Serif;  
    color: #FFF;  
}  
  
#tabbed-toc ul,  
#tabbed-toc ol,  
#tabbed-toc li {  
    margin: 0;  
    padding: 0;  
    list-style: none;  
}  
  
#tabbed-toc .toc-tabs {  
    width: 24.8%;  
    float: left !important;  
}  
  
#tabbed-toc .toc-tabs li a {  
    display: block;  
    font: normal bold 10px/28px Arial, Sans-Serif;  
    height: 28px;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    color: #ccc;  
    text-transform: uppercase;  
    text-decoration: none;  
    padding: 0 12px;  
    cursor: pointer;  
    -webkit-transition: all 0.3s ease-in-out;  
}  
  
#tabbed-toc .toc-tabs li a:hover {  
    background-color: #515050;  
    color: #FFF;  
}  
  
#tabbed-toc .toc-tabs li a.active-tab {  
    background-color: #FFFC03;  
    color: #222;  
    position: relative;  
    z-index: 5;  
    margin: 0 -2px 0 0;  
}  
  
#tabbed-toc .toc-content,  
#tabbed-toc .divider-layer {  
    width: 75%;  
    float: right !important;  
    background-color: #F5F5F5;  
    border-left: 5px solid #FFFC03;  
    -webkit-box-sizing: border-box;  
    -moz-box-sizing: border-box;  
    box-sizing: border-box;  
    -webkit-transition: all 0.3s ease-in-out;  
}  
  
#tabbed-toc .divider-layer {  
    float: none;  
    display: block;  
    position: absolute;  
    top: 0;  
    right: 0;  
    bottom: 0;  
}  
  
#tabbed-toc .panel {  
    position: relative;  
    z-index: 5;  
    font: normal normal 10px Arial, Sans-Serif;  
}  
  
#tabbed-toc .panel li a {  
    display: block;  
    position: relative;  
    font-weight: bold;  
    font-size: 11px;  
    color: #222;  
    line-height: 2.8em;  
    height: 30px;  
    padding: 0 10px;  
    text-decoration: none;  
    outline: none;  
    overflow: hidden;  
    -webkit-transition: all 0.3s ease-in-out;  
}  
  
#tabbed-toc .panel li time {  
    display: block;  
    font-style: italic;  
    font-weight: 400;  
    font-size: 10px;  
    color: #666;  
    float: right;  
}  
  
#tabbed-toc .panel li .summary {  
    display: block;  
    padding: 10px 12px;  
    font-style: italic;  
    border-bottom: 4px solid #275827;  
    overflow: hidden;  
}  
  
#tabbed-toc .panel li .summary img.thumbnail {  
    float: left;  
    display: block;  
    margin: 0 8px 0 0;  
    padding: 4px;  
    width: 72px;  
    height: 72px;  
    border: 1px solid #dcdcdc;  
    background-color: #fafafa;  
}  
  
#tabbed-toc .panel li:nth-child(even) {  
    background-color: #DBDBDB;  
    font-size: 10px;  
}  
  
#tabbed-toc .panel li a:hover,  
#tabbed-toc .panel li a:focus,  
#tabbed-toc .panel li a:hover time,  
#tabbed-toc .panel li.bold a {  
    background-color: #222;  
    color: #FFF;  
    outline: none;  
    -webkit-transition: all 0.3s ease-in-out;  
}  
  
#tabbed-toc .panel li.bold a:hover,  
#tabbed-toc .panel li.bold a:hover time {  
    background-color: #222;  
}  
  
@media (max-width:700px) {  
    #tabbed-toc {  
        background-color: #fff;  
        border: 0 solid #888;  
    }  
    #tabbed-toc .toc-tabs,  
    #tabbed-toc .toc-content {  
        overflow: hidden;  
        width: auto;  
        float: none !important;  
        display: block;  
    }  
    #tabbed-toc .toc-tabs li {  
        display: inline;  
        float: left !important;  
    }  
    #tabbed-toc .toc-tabs li a,  
    #tabbed-toc .toc-tabs li a.active-tab {  
        background-color: #222;  
        color: #ccc;  
    }  
    #tabbed-toc .toc-tabs li a.active-tab {  
        color: #000;  
    }  
    #tabbed-toc .toc-content {  
        border: none;  
    }  
    #tabbed-toc .divider-layer,  
    #tabbed-toc .panel li time {  
        display: none;  
    }  
}  
  
</style>

3. Simple Sitemap




Code


<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7}
#bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
#bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
@media screen and (max-width:768px) {
#bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}
</style>

4. Sidebar With Blue Color Sitemap




Code


<div class="AnandNawal-tab" id="AnandNawal-tab"></div>
<script>
var tabbedTAB={blogUrl:"https://anandnawal.com/",containerId:"AnandNawal-tab",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:#ff0000;">New</em>'};
!function(a,b){var c=(new Date).getTime(),d={blogUrl:"https://AnandNawal.com",containerId:"AnandNawal-tab",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1,newText:' &ndash; <em style="color:#ff0000;">New!</em>'};if("undefined"==typeof tabbedTAB)tabbedTAB=d;else for(var e in d)d[e]="undefined"!=typeof tabbedTAB[e]?tabbedTAB[e]:d[e];a["clickTabs_"+c]=function(a){for(var b=document.getElementById(d.containerId),c=b.getElementsByTagName("ol"),e=b.getElementsByTagName("ul")[0],f=e.getElementsByTagName("a"),g=0,h=c.length;h>g;++g)c[g].style.display="none",c[parseInt(a,10)].style.display="block";for(var i=0,j=f.length;j>i;++i)f[i].className="",f[parseInt(a,10)].className="active-tab"},a["showTabs_"+c]=function(e){for(var f=parseInt(e.feed.openSearch$totalResults.$t,10),g=d,h=e.feed.entry,i=e.feed.category,j="",l=0;l<(g.showNew===!0?5:g.showNew)&&l!==h.length;++l)h[l].title.$t=h[l].title.$t+(g.showNew!==!1?g.newText:"");h=g.sortAlphabetically?h.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):h,i=g.sortAlphabetically?i.sort(function(a,b){return a.term.localeCompare(b.term)}):i,j='<span class="tab-line"></span><ul class="tab-tabs">';for(var m=0,n=i.length;n>m;++m)j+='<li class="tab-tab-item-'+m+'"><a onclick="clickTabs_'+c+"("+m+');return false;" onmousedown="return false;" href="javascript:;">'+i[m].term+"</a></li>";j+="</ul>",j+='<div class="tab-content">';for(var o=0,n=i.length;n>o;++o){j+='<ol class="panel" data-category="'+i[o].term+'"',j+=o!=g.activeTab-1?' style="display:none;"':"",j+=">";for(var p=0;f>p&&p!==h.length;++p){for(var q,r=h[p],s=r.published.$t,t=g.monthNames,u=r.title.$t,v=("summary"in r&&g.showSummaries===!0?r.summary.$t.replace(/<br *\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.numChars)+"&hellip;":""),w=("media$thumbnail"in r&&g.showThumbnails===!0?'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+r.media$thumbnail.url.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+g.noThumb.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>'),x=r.category||[],y=g.showDates?'<time datetime="'+s+'" title="'+s+'">'+s.substring(8,10)+" "+t[parseInt(s.substring(5,7),10)-1]+" "+s.substring(0,4)+"</time>"quot;:"",z=0,A=r.link.length;A>z;++z)if("alternate"===r.link[z].rel){q=r.link[z].href;break}for(var B=0,C=x.length;C>B;++B){var D=g.newTabLink?' target="_blank"':"";x[B].term===i[o].term&&(j+='<li title="'+x[B].term+'"',j+=g.showSummaries?' class="bold"':"",j+='><a href="'+q+'"'+D+">"+u+y+"</a>",j+=g.showSummaries?'<span class="summary">'+w+v+'<span style="display:block;clear:both;"></span></span>':"",j+="</li>")}}j+="</ol>"}j+="</div>",j+='<div style="clear:both;"></div>',b.getElementById(g.containerId).innerHTML=j,a["clickTabs_"+c](g.activeTab-1)};var f=b.getElementsByTagName("head")[0],g=b.createElement("script");g.src=d.blogUrl.replace(/\/+$|[\?&#].*$/g,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+d.maxResults+"&orderby=published&callback=showTabs_"+c,"onload"!==d.preload?a.setTimeout(function(){f.appendChild(g)},d.preload):a.onload=function(){f.appendChild(g)}}(window,document);
</script>

<style scoped="" type="text/css">
.AnandNawal-tab{border-radius:15px;margin:0 auto;position:relative;opacity: .9;background:linear-gradient(90deg, rgb(169, 108, 232), rgb(0, 115, 183));background-size:400% 400%;animation:Gradient 15s ease infinite}
.AnandNawal-tab .loading{display:block;padding:2px 12px;color:#fff}
.AnandNawal-tab ul,.AnandNawal-tab ol,.AnandNawal-tab li{list-style:none;color: #fff; margin:0;padding:0}
.AnandNawal-tab .tab-tabs{width:20%;float:left}
.AnandNawal-tab .tab-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.AnandNawal-tab .tab-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.AnandNawal-tab .tab-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.AnandNawal-tab .tab-content,.AnandNawal-tab .tab-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}
.AnandNawal-tab .tab-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
.AnandNawal-tab .panel{position:relative;z-index:5}
.AnandNawal-tab .panel li a{text-decoration: none;color:#737373;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.AnandNawal-tab .panel li time{display:block;font-weight:bold;font-size:11px;color:#4285f4;float:right}
.AnandNawal-tab .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.AnandNawal-tab .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}
.AnandNawal-tab .panel li{background-color:#f9f9f9;margin:0}
.AnandNawal-tab .panel li:nth-child(even){background-color:#fff}
.AnandNawal-tab .panel li a:hover,.AnandNawal-tab .panel li a:focus,.AnandNawal-tab .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.AnandNawal-tab .panel li a em{background:#0998ce;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}
.AnandNawal-tab .panel li:before{display:none}
@-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){.AnandNawal-tab .tab-tabs,.AnandNawal-tab .tab-content{overflow:hidden;width:auto;float:none;display:block}.AnandNawal-tab .tab-tabs li{display:inline;float:left}.AnandNawal-tab .tab-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.AnandNawal-tab .tab-content{border:none}.AnandNawal-tab .tab-line,.AnandNawal-tab .panel li time{display:none}}
</style>

5. Minimal Sitemap




Code


<style type="text/css">
#bp_toc {
background: #FFFFFF;
border: 0 solid #000000;
margin-top: 10px;
padding: 10px 0;
width: 100%;
}
h3.bp_toc_title {
font-size: 28px;
line-height: 30px;
padding-top: 40px;
margin: 0 0 20px;
}
#bp_tocm {
margin-right: 30px;
}
#bp_toc a {
text-decoration: none !important;
}
#bp_toc a:hover {
text-decoration: underline !important;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #4e4949;
border-bottom: 5px solid #dfdfdf;
padding: 10px;
width: 50%;
}
.toc-entry-col2 {
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
}
.toc-header-col2 {
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
width: 15%;
}
.toc-header-col3 {
width: 35%;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
color: #EBEBEB;
font-size: 14px;
font-style: normal;
font-weight: bold;
line-height: 1.4em;
text-decoration: none;
border-collapse: separate;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration: underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
background: #F8F8F8;
border-bottom: 2px solid #FFFFFF;
padding: 10px;
}
.toc-entry-col2 {
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
color: #45818E;
font-family: 'Verdana',Arial,sans-serif;
font-size: 12px;
}
.toc-note {
background-color: #4e4949;
color: #EBEBEB;
display: inline-block;
font-size: 14px;
padding: 10px;
text-align: center;
font-weight: 600;
text-transform: uppercase;
border-bottom: 1px solid #dfdfdf;
}
</style>


<div id="bp_tocm">
<div id="bp_toc">
<script type="text/javascript">
//<![CDATA[
var postTitle=[],postUrl=[],postDate=[],postSum=[],postLabels=[],sortBy="datenewest",tocLoaded=!1,numChars=250,postFilter="",tocdiv=document.getElementById("bp_toc"),totalEntires=0,totalPosts=0; function loadtoc(c){if("entry"in c.feed){var d=c.feed.entry.length;totalEntires+=d;totalPosts=c.feed.openSearch$totalResults.$t;if(totalPosts>totalEntires){var b=document.createElement("script");b.type="text/javascript";startindex=totalEntires+1;b.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=500&alt=json-in-script&callback=loadtoc");tocdiv.appendChild(b)}for(b=0;b<d;b++){for(var a=c.feed.entry[b],e=a.title.$t,k=a.published.$t.substring(0,10),l,f=0;f<a.link.length;f++)if("alternate"== a.link[f].rel){l=a.link[f].href;break}var g="content"in a?a.content.$t:"summary"in a?a.summary.$t:"",g=g.replace(/<\S[^>]*>/g,"");if(g.length>numChars)var g=g.substring(0,numChars),h=g.lastIndexOf(" "),g=g.substring(0,h)+"...";h="";if("category"in a){for(f=0;f<a.category.length;f++)h+="<a href=\"javascript:filterPosts('"+a.category[f].term+"');\" title=\"Click here to select all posts with label '"+a.category[f].term+"'\">"+a.category[f].term+"</a>, ";a=h.lastIndexOf(",");-1!=a&&(h=h.substring(0, a))}postTitle.push(e);postDate.push(k);postUrl.push(l);postSum.push(g);postLabels.push(h)}}totalEntires==totalPosts&&(tocLoaded=!0,showToc());sortPosts(sortBy);tocLoaded=!0}function filterPosts(c){postFilter=c;displayToc(postFilter)}function allPosts(){postFilter="";displayToc(postFilter)} function sortPosts(c){function d(a,b){var c=postTitle[a];postTitle[a]=postTitle[b];postTitle[b]=c;c=postDate[a];postDate[a]=postDate[b];postDate[b]=c;c=postUrl[a];postUrl[a]=postUrl[b];postUrl[b]=c;c=postSum[a];postSum[a]=postSum[b];postSum[b]=c;c=postLabels[a];postLabels[a]=postLabels[b];postLabels[b]=c}for(var b=0;b<postTitle.length-1;b++)for(var a=b+1;a<postTitle.length;a++)"titleasc"==c&&postTitle[b]>postTitle[a]&&d(b,a),"titledesc"==c&&postTitle[b]<postTitle[a]&&d(b,a),"dateoldest"==c&&postDate[b]> postDate[a]&&d(b,a),"datenewest"==c&&postDate[b]<postDate[a]&&d(b,a)} function displayToc(c){var d=0,b,a="Click to sort by title",e="Click to sort by date",k="";"titleasc"==sortBy&&(a+=" (descending)",e+=" (newest first)");"titledesc"==sortBy&&(a+=" (ascending)",e+=" (newest first)");"dateoldest"==sortBy&&(a+=" (ascending)",e+=" (newest first)");"datenewest"==sortBy&&(a+=" (ascending)",e+=" (oldest first)");""!=postFilter&&(k="Click to show all posts");b="<table><tr>";b+='<td class="toc-header-col1">';b+='<a href="javascript:toggleTitleSort();" title="'+a+'">POST TITLE</a>'; b+="</td>";b+='<td class="toc-header-col2">';b+='<a href="javascript:toggleDateSort();" title="'+e+'">POST DATE</a>';b+="</td>";b+='<td class="toc-header-col3">';b+='<a href="javascript:allPosts();" title="'+k+'">LABELS</a>';b+="</td>";b+="</tr>";for(a=0;a<postTitle.length;a++)""==c?(b+='<tr><td class="toc-entry-col1"><a href="'+postUrl[a]+'" title="'+postSum[a]+'">'+postTitle[a]+'</a></td><td class="toc-entry-col2">'+postDate[a]+'</td><td class="toc-entry-col3">'+postLabels[a]+"</td></tr>",d++): (z=postLabels[a].lastIndexOf(c),-1!=z&&(b+='<tr><td class="toc-entry-col1"><a href="'+postUrl[a]+'" title="'+postSum[a]+'">'+postTitle[a]+'</a></td><td class="toc-entry-col2">'+postDate[a]+'</td><td class="toc-entry-col3">'+postLabels[a]+"</td></tr>",d++));b+="</table>";c=d==postTitle.length?'<div class="toc-note">Displaying all '+postTitle.length+" posts<br/></div>":'<div class="toc-note">Displaying '+d+" posts labeled '"+(postFilter+"' of "+postTitle.length+" posts total<br/></div>");tocdiv.innerHTML= c+b}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc";sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest";sortPosts(sortBy);displayToc(postFilter)}function showToc(){tocLoaded?(displayToc(postFilter),document.getElementById("toclink")):alert("Just wait... TOC is loading")} function hideToc(){document.getElementById("toc").innerHTML="";document.getElementById("toclink").innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">\u00bb Show Table of Contents</a> <img src="https://sites.google.com/site/chenkaieblog/new_1.gif"/>'};
//]]>
</script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script>
</div>
</div>

6. Pro Max Plus Sitemap

<div class="sitemaps" id="sitemaps">
  <div class="loading">Loading....</div>
</div>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown */
var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemaps',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"sitemap-box\"><h4 class=\"judul\">'+n[g]+'</h4>',l+='<div class=\"konten\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://www.anandnawal.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
/*]]>*/</script>

Adding HTML (Hypertext Markup Language) Sitemap page to blogger

  • Copy your desired theme and paste it on the newly created page. Before pasting make sure HTML mode is on, if off then toggle it. (If you already have created a sitemap, then delete all existing codes on that sitemap page).
  • Replace https://www.anandnawal.com with your blog URL.


    • Tip:-
    Change the URL Only if you are using 1st, 2nd or 4th Sitemap Code. Because 3rd and 5th Sitemap Code don't need the URL to be changed.
  • Under Page settings add a Search description.
  • Publish the Page
  • Done !! You've successfully installed a beautiful HTML sitemap page in blogger.
  • You have to follow all the steps mentioned above, To successfully apply this HTML Sitemap.