How to add stylish sitemap on blogger all themes html

A site map is a beautiful tool that allows you to view all the posts on your website together or organized.

This side size helps your visitors find your post very easily. Your website plays an important role in SEO.

How to replace this important tool on your website. Today's post highlights it.

This task can be accomplished in three main steps, namely CSS, HTML, and JavaScript.

For your convenience, I have put all three codes together in one place so that you can easily integrate them into your Blogger website.

To complete this task, you need to create a new page through the Blogger dashboard, where the page name should be Sitemap.

Inside this page, using the HTML viewer, copy and paste the following code into the new page.

  <div class='sitemaps' id='sitemaps'><center><div class='loading' style='text-align:center'><svg class='line' viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg></div></center></div> 

<script>/*<![CDATA[*/
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: 1500}; 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=\"sitemapBox\"><h4 class=\"sitemapTitle\">'+n[g]+'</h4>',l+='<div class=\"sitemapContent\"><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 }; var i=o.createElement("script");i.src="https://www.therealanwarul.com.bd/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>

<style>.loading{box-shadow:0 5px 35px rgba(0,0,0,.07); justify-content:flex; align-items:center;width:15%;border-radius:100%;}  
.sitemaps{font-size:14px}.sitemapBox{padding:15px;background:#f5f5f51c;box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:10px;justify-content:flex-start;align-items:center; margin-top:25px; position:relative;left:-4px;right:-4px;width:calc(100% + 8px)}.sitemapBox:not(:last-child){margin-bottom:20px}.pBd .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--fontB)}.sitemapTitle:before{content:'📁 '; font-size:90%;opacity:.8}.sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count}.sitemaps li{display:flex;align-items:baseline}
.sitemaps li:not(:last-child){margin-bottom:0}.sitemaps li:before{content:counter(sitemap-count) '.';counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:13px;font-family:var(--fontB);line-height:normal; opacity:.7}.sitemaps .loading{display:inline-flex;align-items:center}
.sitemaps .loading svg{margin-right:3px;-webkit-animation:rotation 2s infinite linear}@-webkit-keyframes rotation {from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}.drK .sitemapBox{background:black}</style>

In the above code you need to change the yellow area. Basically, my website link is used here by default.

If you use your website link here by default, your work will be done. After changing the website link, publish this page and visit it to see your work is done.

If there is any problem, message us in our Telegram group.