How To Create Sitemap Page In Median UI/ Fletro Pro Theme?

In this article, You will learn how to add an HTML sitemap page in the Median UI theme.

Median UI is a Responsive and modern-looking Blogger template and it comes with a lot of inbuild features including a dedicated HTML sitemap.

All you have to do is to create a sitemap page using the median UI sitemap script in your blogger website. So, read this article carefully to add the sitemap correctly.

What is an HTML sitemap?

An HTML sitemap is a page that contains links to all of your blog posts and pages that you want search engines like Google and Bing to index.

Although there is an XML sitemap for search engines you can add a visual HTML sitemap for your readers. It helps them navigate and understand a website easily.

If you are using any other themes and want to add an HTML sitemap to your Blogger website then you can watch this tutorial now.

Here, I will cover the HTML sitemap for Median UI and how to customize it using CSS.

How to Add Sitemap page in Median UI theme?

To add an HTML sitemap page in the median UI theme, follow the steps given below.

Step-1: Go to Blogger dashboard and open pages section.

Step-2: Now create a new page and name it as sitemap.

Step-3: Now switch to HTML view and paste the below code.

<div class='postSection sitemaps' id='sitemaps'>
  <div class='loading'>Loading....</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_domain_name.blogspot.com/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}
.darkMode .sitemapBox{border-color:rgba(255,255,255,.1)}
</style>

Step-4: Now Replace the website URL (www.your_domain_name.blogspot.com) in this code and hit the publish button.

Now the HTML sitemap is added to your median UI theme. But, in some cases, it might not work.

Watch this video to learn more

How to fix the sitemap page that doesn’t appear in the median UI theme?

There are two conditions that should be fulfilled to properly show the sitemap page in Blogger.

Make sure your website feed is active and set it to full.
Make sure each post has a lebel.

If there is only one post that doesn’t have a label, then the sitemap script will not work.

I hope you got the idea of how to add the HTML sitemap page in Blogger. If you have any doubts regarding this you can ask me in the comment section or ask in our Telegram Group.