Top 10 HTML Sitemap Page For Blogger | Free and Responsive design


  1. Colourful Sitemap

    <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>
  2. Eye-Catching Sitemap

<div class="Techandfunzone-tab" id="Techandfunzone-tab"></div>
<script>
var tabbedTAB={blogUrl:"https://techandfunzone.eu.org/",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>
  1. Simple Sitemap
<!--[ Sitemap script DTE, source: dte.web.id/teknis/widget-daftar-isi-tabulasi-blogger ]-->
<script src='//dte-project.github.io/blogger/tabbed-toc.min.js?active=0&amp;load=true&amp;ad=false&amp;date=%25M~%25%20%25D%25%2C%20%25Y%25' defer='defer'></script>

<style>
  .tabbed-toc{border:0;font-size:15px}
  .tabbed-toc-tabs{width:10em;font-size:14px}
  .tabbed-toc-tab{padding:0 15px;border-radius:3px 0 0 3px;position:relative;transition:var(--trans-1);color:inherit}
  .tabbed-toc-tab::after{content:'';position:absolute;top:0;bottom:0;right:0;border-right:1px solid var(--linkC);opacity:0}
  .tabbed-toc-tab:hover, .tabbed-toc-tab.active{background:var(--transB)}
  .tabbed-toc-tab:hover::after, .tabbed-toc-tab.active::after{opacity:1}
  .tabbed-toc-tab.active{color:var(--linkC);opacity:.7}
  .ltr .tabbed-toc-panels{border-color:var(--contentL)}
  .ltr .tabbed-toc-time{position:relative;font-size:12px;opacity:.7}
  .tabbed-toc li{padding:5px 7.5px;line-height:1.6em;min-height:40px;display:flex;align-items:center;justify-content:space-between}
  .tabbed-toc li >*{padding:0 7.5px; margin:0}
  .tabbed-toc a{color:inherit}
  .tabbed-toc-title{font-size:16px}
  .tabbed-toc-title sup{font-weight:400;font-size:12px;color:var(--linkC)}
  .drkM .ltr .tabbed-toc-panels{border-color:rgba(255,255,255,.1)}
  .drkM .tabbed-toc-tab.active, .drkM .tabbed-toc-title sup{color:var(--darkL)}
  .drkM .tabbed-toc-tab::after{border-color:var(--darkL)}
  @media screen and (max-width:750px){
    .tabbed-toc nav{display:flex;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch; /*position:relative;width:calc(100% + 40px);left:-20px;right:-20px;padding:0 20px*/}
    .tabbed-toc nav::-webkit-scrollbar{width:0;height:0}
    .tabbed-toc nav::-webkit-scrollbar-track{background:transparent}
    .tabbed-toc nav::-webkit-scrollbar-thumb{background:transparent;border:none}
    .tabbed-toc-tab{border-radius:3px 3px 0 0;white-space:nowrap;flex-shrink:0;scroll-snap-align:start}
    .tabbed-toc-tab::after{top:auto;left:0;border-right:0;border-bottom:1px solid var(--linkC)}
    .tabbed-toc ol{margin-top:15px;padding:0 15px;list-style:decimal}
    .tabbed-toc li{display:list-item;padding:5px 0;overflow:visible;list-style:inherit}
    .drkM .tabbed-toc-tab::after{border-color:var(--darkL)}
  }
  @media screen and (max-width:500px){
    .tabbed-toc-title{font-size:15px}
  }
</style>
  1. Sidebar With Blue Color Sitemap
<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>
  1. Minimal Sitemap
<script src="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css" rel="stylesheet"></link>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=pikisitemap" type="text/javascript"></script>
  1. Zap Sitemap
<div id=”tabbed-toc”>
<span class=”loading”>Loading, please wait for a moment…</span></div>
<br />
<script type=”text/javascript”>
var tabbedTOC = {
    blogUrl: “http://www.mybloggerguides.com”, // Enter your blog URL
    containerId: “tabbed-toc”, // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Default thumbnail size
    noThumb: “”, // A “no thumbnail” URL
    monthNames: [ // Array of month namesJanuary”,
        “February”,
        “March”,
        “April”,
        “May”,
        “June”,
        “July”,
        “August”,
        “September”,
        “October”,
        “November”,
        “December”
    ],
    newTabLink: true, // Open link in new window. `false` to open in same window
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || “onload”)
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the “New!” mark in most recent posts or
 //define how many recent posts are to be marked by changing the number
    newText: ” – <em style=’color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;’>New!</em>” // HTML/CSS for
//the “New!” text
};
</script>
<script src=”https://googledrive.com/host/0B_PLgWpOK_wTazVMekZ3TTBiY2M/” type=”text/javascript”></script>
<style>
/*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>
  1. Aulian Sitemap
<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="https://www.blogrbd.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script>
  1. Freaks Sitemap
<div id="sitemap-blog">
    <table>
        <tbody>
            <tr>
                <td>
                    <select id="feed-order">
                        <option selected="" value="published">Latest articles</option>
                        <option value="updated">The last updated article</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <select disabled="" id="label-sorter">
                        <option selected="">Loading....</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <form id="post-searcher">
                        <input id="feed-q" placeholder="Type and press ENTER" type="text" /> </form>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<br />
<header id="result-desc"></header>
<br />
<ul id="daftar-isi-blog"></ul>
<div id="feed-nav"></div>


<script type="text/javascript">
//<![CDATA[ 
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
var css = '#sitemap-blog{padding:7px 10px;margin:0 auto}#sitemap-blog table{width:auto;margin:0 auto;border:none!important}#sitemap-blog table td{border:none!important;padding:0!important}#sitemap-blog form{font:inherit}#sitemap-blog label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}#sitemap-blog select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#sitemap-blog input,#sitemap-blog select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#sitemap-blog select option{min-height:1.4em!important}#sitemap-blog input#feed-q{padding:5px 10px!important}#daftar-isi-blog{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}#daftar-isi-blog li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}#daftar-isi-blog li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}#daftar-isi-blog li a{text-decoration:none;color:#2C2C2C;font-weight:500}#daftar-isi-blog li a:hover{text-decoration:none;color:#E94141}#daftar-isi-blog li .news-text{margin-top:5px;line-height:1.3em!important}#daftar-isi-blog li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}#feed-nav a,#feed-nav span:hover{color:#1B1B1B}#feed-nav a:active,#feed-nav a:hover{color:#555}#feed-nav span{cursor:wait}@media (max-width:600px){#sitemap-blog table{margin:0 auto;width:100%}#daftar-isi-blog,#sitemap-blog{margin:0 auto}#daftar-isi-blog li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#daftar-isi-blog li .news-text,#feedContainer:after,#daftar-isi-blog li img{display:table-column}}.post-body{min-height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ZEEAd6xwymBKK1dF18W9QPK_lrjUN4iAACnG5ROyHl-2Ph9xw7S64uRQvcFvB5dVI9ArXtdSYxvVjq_fmrvtndYbCsRQjA6pP1mB58rcAfnpWKCiyV9Dv2J-gXjeoOFAjNzDS8w55mM/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important}';
style.appendChild(document.createTextNode(css));
head.appendChild(style); 
//]]></script>

<script type='text/javaScript'>
//<![CDATA[ 
document.write;
var loadToc, loadCategories, _toc = {
    init: function () {
        var cfg = {
                homePage: window.location.origin,
                maxResults: 20,
                numChars: 270,
                thumbWidth: 140,
                thumbHeight: 95,
                navText: "Show next article &#9660;",
                resetToc: "Back to the Beginning",
                noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-h6NUOxK3Ds42193RizQ9KiTH0Z9sRNZ356BJlhtkjT7qy7kP1Ih3r9hENseA_HnVk_SydbLb9YPqBhdyP2_p0Vra3xd3CAZjPdaPHQB8HcHHqxadtJitDqOZT9o6k7xP8mPFV725Ymvu/s1100/no-thumbnail.png",
                loading: "<span>Load...</span>",
                counting: "<div>Loading articles...</div>",
                searching: "<span>Look for...</span>"
            },
            w = window,
            d = document,
            el = function (id) {
                return d.getElementById(id);
            },
            o = {
                a: el('feed-order'),
                b: el('label-sorter').parentNode,
                c: el('post-searcher'),
                d: el('feed-q'),
                e: el('result-desc'),
                f: el('daftar-isi-blog'),
                g: el('feed-nav'),
                h: d.getElementsByTagName('head')[0],
                i: 0,
                j: null,
                k: 'published',
                l: 0,
                m: ""
            },
            fn = {
                a: function () {
                    old = el('temporer-script');
                    old.parentNode.removeChild(old);
                },
                b: function (param) {
                    var script = d.createElement('script');
                    script.type = "text/javascript";
                    script.id = "temporer-script";
                    script.src = param;
                    if (el('temporer-script')) fn.a();
                    o.h.appendChild(script);
                },
                c: function (mode, tag, order) {
                    o.i++;
                    o.e.innerHTML = cfg.counting;
                    o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"];
                    if (mode === 0) {
                        fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');
                    } else if (mode == 1) {
                        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc');
                    }
                    o.j = (tag !== null) ? tag : null;
                    o.l = mode;
                    o.a.disabled = true;
                    o.b.children[0].disabled = true;
                },
                d: function (json) {
                    var _h;
                    o.g.innerHTML = "";
                    o.e.innerHTML = o.l == 1 ? '<span>Search results for keywords <b>&#8220;' + o.m + '&#8221;</b> (' + json.feed.openSearch$totalResults.$t + ' Results)</span>' : '<div>Total: ' + json.feed.openSearch$totalResults.$t + ' Article</div>';
                    if ("entry" in json.feed) {
                        var a = json.feed.entry,
                            b, c, _d, e = "0 Comment",
                            f = "",
                            g;
                        for (var i = 0; i < cfg.maxResults; i++) {
                            if (i == a.length) break;
                            b = a[i].title.$t;
                            _d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : "";
                            g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "");
                            for (var j = 0, jen = a[i].link.length; j < jen; j++) {
                                c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#";
                            }
                            for (var k = 0, ken = a[i].link.length; k < ken; k++) {
                                if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {
                                    e = a[i].link[k].title;
                                    break;
                                }
                            }
                            _h = d.createElement('li');
                            _h.innerHTML = '<div class="inner"><img style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" data-src="' + g + '" src="' + g + '" alt="' + b + '" title="' + b + '"><a class="toc-title" href="' + c + '" target="_blank" title="' + b + '">' + b + '</a><div class="news-text">' + _d + '&hellip;<br style="clear:both;"></div></div>';
                            o.f.appendChild(_h);
                        }
                        _h = d.createElement('a');
                        _h.href = '#load-more';
                        _h.innerHTML = cfg.navText;
                        _h.onclick = function () {
                            fn.c(o.l, o.j, o.k);
                            return false;
                        };
                    } else {
                        _h = d.createElement('a');
                        _h.href = '#reset-content';
                        _h.innerHTML = cfg.resetToc;
                        _h.onclick = function () {
                            o.i = -1;
                            o.e.innerHTML = cfg.counting;
                            o.f.innerHTML = "";
                            fn.c(0, null, 'published');
                            o.a.innerHTML = o.a.innerHTML;
                            o.b.children[0].innerHTML = o.b.children[0].innerHTML;
                            return false;
                        };
                    }
                    o.g.appendChild(_h);
                    o.a.disabled = false;
                    o.b.children[0].disabled = false;
                },
                e: function (json) {
                    var a = json.feed.category,
                        b = '<select id="label-sorter"><option value="" selected disabled>Select a Category...</option>';
                    for (var i = 0, len = a.length; i < len; i++) {
                        b += '<option value="' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '">' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '</option>';
                    }
                    b += '</select>';
                    o.b.innerHTML = b;
                    o.b.children[0].onchange = function () {
                        o.i = -1;
                        o.f.innerHTML = "";
                        o.g.innerHTML = cfg.loading;
                        fn.c(0, this.value, o.k);
                    };
                }
            };
        loadToc = fn.d;
        loadCategories = fn.e;
        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max-results=' + cfg.maxResults + '&orderby=published&callback=loadToc');
        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');
        o.a.onchange = function () {
            o.i = -1;
            o.f.innerHTML = "";
            o.g.innerHTML = cfg.counting;
            o.b.children[0].innerHTML = o.b.children[0].innerHTML;
            fn.c(0, null, this.value);
            o.k = this.value;
        };
        o.c.onsubmit = function () {
            o.i = -1;
            o.f.innerHTML = "";
            o.m = o.d.value;
            fn.c(1, o.d.value, o.k);
            return false;
        };
    }
};
_toc.init(); 
//]]>
</script>

Adding HTML (Hypertext Markup Language) Sitemap web page to blogger

  • Copy your preferred topic and paste it to the newly created web page. Before pasting ensure HTML mode is on, if off then toggle it. (If you have already got created a sitemap, then delete all current codes on that sitemap web page).
  • Replace https://www.yoursite.com together along with your weblog URL.
  • Now Publish the Page.
  • Done !! You've efficaciously mounted a lovely HTML sitemap web page in blogger.

You should comply with all of the steps in your site as given above, To efficaciously follow this HTML Sitemap.

Next Post
No Comment
Add Comment
comment url