Hello Guys, Welcome to The Web Trick. Today's article is about "How to Add HTML Sitemap Page for Blogger" template. So follow the some easy steps to add attractive, stylish sitemap page in Median Ui v1.7.
Why Sitemap is Important?
Sitemap is the structure of our blog pages and posts. The sitemap page will also improve the user experience. When we add a sitemap page to our blogger then the users can easily find the post they want to find. And most importantly, when the (Google,Yahoo) Webmaster Tools tools crawler come to our website then the crawl is easily done.
Before making a sitmap page, please see its demo once.
How to Create HTML Sitemap Page in Median Ui?
Step 1: First, on Blogger Dashboard, click Pages and create a New Page.
Step 2: In Title section type your Sitemap name.
Step 3: Now switch to HTML Mode and delete everything inside in HTML Mode.
Step 4: Now, copy the below code and paste it in HTML section of your sitemap page.
All templates have different dark mode classes please customize their class with your template (drK class is already marked).
<!--Median Ui v1.7 Sitemap Page Codes by The Web Trick-->
<div class='postBody' id='postBody'><div class='postSection sitemaps' id='sitemaps'>
<div class='loading'>Loading....</div>
</div></div>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown: change i.src="..." with your url */
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=\"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.your_site_name/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>
.sitemaps{font-size:14px}
.sitemapBox{padding:15px;border:1px solid var(--content-border);border-radius:5px}
.sitemapBox:not(:last-child){margin-bottom:20px}
.postEntry .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--body-font)}
.sitemapTitle:before{content:'Label: '; 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(--font-body);line-height:normal; opacity:.7}
.drK .sitemapBox{border-color:rgba(255,255,255,.1)}
</style>
Step 5: Now add your blog address in place of your_site_name.
Step 6: That's it! click on this icon to save sitemap and then click on 'Publish'.
At this point, your sitemap page has been completely created, if you follow all the steps correctly we can guarantee that the sitemap page is working properly.
Conclusion
You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.
I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.
Assuming you experience any issues while copying this script you can impart me by Contact and I'll attempt to help.
© Copyright The Web Trick