Tech & Fun Zone

An HTML sitemap may be a directory that comprises a website's content organized by topics, published date, or labels to assist both search engines and users navigate through the site easily. It helps with the fast indexing of your content & increases the search console crawl rate.

There are two types of sitemaps: An XML Sitemap and An HTML Sitemap. In this article, I'm getting to justify first off these sitemaps and second share the code to feature a gorgeous and beautiful HTML Sitemap page to the blogger.

Table of Contents

What is an XML Sitemap?

An XML Sitemap may be a .xml file attached to your web address. It consists of all page URLs (Universal Resource Locater) with additional information about each URL that a search engine crawler uses to navigate the page contents.

For instance, https://www.techandfunzone.in/sitemap.xml is an XML Sitemap page for our blog. Copy the full address, paste it, and you will get a file downloaded in your Browser. Open that file and check the contents inside this blog.

The search engine uses the same file to know about published content. Submission of this XML Sitemap page to Google Webmaster Tools assures that the Google bot crawls pages easily.

What is an HTML Sitemap Page?

An HTML 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 will 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 Stylish 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 in blogger?

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

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 Accordion Effect HTML Sitemap






Code

/**  
 * BLOGGER SITEMAP WITH ACCORDION EFFECT (SORT BY LABEL)  
 * ---------------------------------------------------  
 * Modified by TechandFunZone
 * URL: https://www.techandfunzone.in 
 * ---------------------------------------------------  
 */

<div dir="ltr" style="text-align: left;" trbidi="on">  
<style type="text/css">  
.tb-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);  
}  
.tb-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;  
}  
.tb-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%);  
}  
.tb-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;  
}  
.tb-sitemap .toc-header.active {  
    background: #1a1b1e;  
    color: #fff;  
}  
.tb-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);  
}  
.tb-sitemap .loading {  
    display: block;  
    padding: 14px;  
    text-decoration: blink;  
}  
.tb-sitemap ol {  
    margin: 0;  
    padding: 0;  
    list-style: none;  
    transition: initial;  
}  
.tb-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;  
}  
.tb-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%);}  
.tb-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%);}  
.tb-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%);}  
  
.tb-sitemap li::before {  
    content: counter(step-counter)'.';  
    margin-right: 5px;  
}  
.tb-sitemap a {  
    color: #fff!important;  
    text-decoration: none;  
    font-size: 90%;  
    transition: initial;  
    font-weight:normal!important;  
}  
.tb-sitemap a:visited {  
    color: #fff!important;  
    transition: initial;  
}  
.tb-sitemap a:hover,.tb-sitemap a:visited:hover {  
    color: #fff!important;  
    text-decoration: underline!important;  
    transition: initial;  
}  
</style>  
  
<div class="tb-sitemap" id="tb-sitemap">  
<span class="loading">Sitemap Loading..</span>  
<script type="text/javascript">  
var toc_config = {  
 url: 'https://www.techandfunzone.in',  
 containerId: 'tb-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 HTML Sitemap






Code

/**  
 * HTML Sitemap For Blogger 2023
 * ---------------------------------------------------  
 * Modified by TechandFunZone
 * URL: https://www.techandfunzone.in
 * ---------------------------------------------------  
 */
<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.techandfunzone.in",  
    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 and Elegant HTML 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. 4. Sidebar With Blue Color Sitemap






Code

<div class="Techandfunzone-tab" id="Techandfunzone-tab"></div>
<script>
var tabbedTAB={blogUrl:"https://techandfunzone.in/",containerId:"Techandfunzone-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:!1,showNew:7,newText:' &ndash; <em style="color:#ff0000;">New</em>'};
!function(a,b){var c=(new Date).getTime(),d={blogUrl:"https://Techandfunzone.com",containerId:"Techandfunzone-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>":"",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">
.Techandfunzone-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}
.Techandfunzone-tab .loading{display:block;padding:2px 12px;color:#fff}
.Techandfunzone-tab ul,.Techandfunzone-tab ol,.Techandfunzone-tab li{list-style:none;color: #fff; margin:0;padding:0}
.Techandfunzone-tab .tab-tabs{width:20%;float:left}
.Techandfunzone-tab .tab-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.Techandfunzone-tab .tab-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.Techandfunzone-tab .tab-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.Techandfunzone-tab .tab-content,.Techandfunzone-tab .tab-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}
.Techandfunzone-tab .tab-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
.Techandfunzone-tab .panel{position:relative;z-index:5}
.Techandfunzone-tab .panel li a{text-decoration: none;color:#737373;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.Techandfunzone-tab .panel li time{display:block;font-weight:bold;font-size:11px;color:#4285f4;float:right}
.Techandfunzone-tab .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.Techandfunzone-tab .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}
.Techandfunzone-tab .panel li{background-color:#f9f9f9;margin:0}
.Techandfunzone-tab .panel li:nth-child(even){background-color:#fff}
.Techandfunzone-tab .panel li a:hover,.Techandfunzone-tab .panel li a:focus,.Techandfunzone-tab .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.Techandfunzone-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}
.Techandfunzone-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){.Techandfunzone-tab .tab-tabs,.Techandfunzone-tab .tab-content{overflow:hidden;width:auto;float:none;display:block}.Techandfunzone-tab .tab-tabs li{display:inline;float:left}.Techandfunzone-tab .tab-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.Techandfunzone-tab .tab-content{border:none}.Techandfunzone-tab .tab-line,.Techandfunzone-tab .panel li time{display:none}}
</style>

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

How to Apply HTML Sitemap page to blogger

1. 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).
2. Replace https://www.techandfunzone.in with your blog URL.

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

3. Under Page settings add a Search description.
4. Publish the Page
5. Done !! You've successfully installed a beautiful HTML sitemap page in blogger.
6. You have to follow all the steps mentioned above, To successfully apply this HTML Sitemap.

Term's of use !
The templates or Scripts are for a personal use only. How personal can it get? Well, you are very much encouraged to download the template or Script of your choice and use it. But Personal means that you can’t make business out of our templates or Scripts. You are not allowed to sub-license, transfer, resell or republish any of the templates even for free.

Final Words

I hope this Article Top 5 Stylish HTML Sitemap For Blogger 2023 would be helpful for you. If you want any more information like this article. Please follow our Tech & Fun Zone on Telegram Channel for updates.

Hopefully, the Above tutorial has completely helped you to learn Top 5 Stylish HTML Sitemap For Blogger 2023 If you have got any issues in understanding this tutorial. Then in fact you'll be able to inquire from me by commenting or Contact us

Go to Link

© Tech & Fun Zone