Add Professional Index to Blogger website sitemap

Add Professional Index to Blogger website sitemap

Of course, you can do this manually every time you add a new topic to your blog, but this is very boring and takes time, and it may not be in the appropriate appearance, but with this addition it will be automatic and attractive.

Addition preview:

Preview

Explanation of how to install:

To add it create a new page and choose HTML To edit, copy the following code and paste it on the page, thenkeep .

CSS Code 1st copy it bring your pointer over code and double click

<style scoped="" type="text/css">
  .tab-bs{margin:0 auto;position:relative;background:linear-gradient(-45deg,#8a2be2,#892be2bd,#892be27a,#892be228);background-size:400% 400%;animation:Gradient 15s ease infinite;text-align: left;}
  .tab-bs .loading{display:block;padding:2px 12px;color:#fff}
  .tab-bs ul,.tab-bs ol,.tab-bs li{margin:0;padding:0;list-style:none}
  .tab-bs .toc-tabs{width:20%;float:left}
  .tab-bs .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
  .tab-bs .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
  .tab-bs .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
  .tab-bs .toc-content,.tab-bs .toc-line{width:80%;float:left;background-color:#fff;box-sizing:border-box}
  .tab-bs .toc-line{float:none;display:block;top:0;left:0;bottom:0}
  .tab-bs .panel{position:relative;z-index:5}
  .tab-bs .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
  .tab-bs .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:left}
  .tab-bs .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
  .tab-bs .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}
  .tab-bs .panel li{background-color:#f9f9f9;margin:0}
  .tab-bs .panel li:nth-child(even){background-color:#fff}
  .tab-bs .panel li a:hover,.tab-bs .panel li a:focus,.tab-bs .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
  .tab-bs .panel li a em{background:#8a2be2;color:#fff!important;font-style:initial;font-size:11px;margin:0 5px 0 5px;padding:2px 10px;border-radius:22px;float: left;}
  .tab-bs .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){.tab-bs .toc-tabs,.tab-bs .toc-content{overflow:hidden;width:auto;float:none;display:block}.tab-bs .toc-tabs li{display:inline;float:left}.tab-bs .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tab-bs .toc-content{border:none}.tab-bs .toc-line,.tab-bs .panel li time{display:none}}
  </style>

HTML Code and then copy it bring your pointer over code and double click

<div class="tab-bs" id="tab-bs"></div>
  <script>
  var tabbedTOC={blogUrl:"https://blogger-store.com",containerId:"tab-bs",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","Agu","Sep","Oct","Nov","Dec"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:red;">Latest</em>'};
  </script>

JavaScript Code at last copy it bring your pointer over code and double click

<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown: change i.src="..." with your url */
!function(a,b){var c=(new Date).getTime(),d={blogUrl:"https://blogger-store.com/",containerId:"tabbed-toc",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1,newText:' &ndash; <em style="color:red;">Baru!</em>'};if("undefined"==typeof tabbedTOC)tabbedTOC=d;else for(var e in d)d[e]="undefined"!=typeof tabbedTOC[e]?tabbedTOC[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="toc-line"></span><ul class="toc-tabs">';for(var m=0,n=i.length;n>m;++m)j+='<li class="toc-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="toc-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>

Add-on customization:

make a returnhttps://blogger-store.com Link to your blog, and congratulations on adding it, I hope you liked the addition.

Thanks for reading: Add Professional Index to Blogger website sitemap, Sorry, my English is bad:)