An HTML sitemap may be a directory that comprises a website’s content organized by topics, published date, or labels to assist both search engines and users navigate through the site easily. It helps with the fast indexing of your content and increases the search console crawl rate.
Short Talk
Hello Guys 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 (Hyper-Text Markup Language) Sitemap Page is a .html webpage, created for all published contents organized by labels, dates, or topics. It helps users navigate through the contents simply. As an example, you can check the Sitemap Page of our blog to seek out all published articles and pages organized by labels. Isn’t that cool? Today I’ll share a simple trick to add a beautiful & Stylish HTML Sitemap page in Median Ui theme. Just Read the Article through the end Carefully.
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 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.
- Go to Blogger dashboard and open Pages section.
- Now create a new page and name it as Sitemap.
- In the right menu of the page Click on Options, and in the Reader Comments select Do not allow, hide existing.
- Now switch to HTML view and paste the below code.
- Now Replace the website URL https://www.techandfunzone.eu.org/ with your blog URL and hit the publish button. Now the HTML sitemap is added to your Median UI theme. But, in some cases, it might not work.
<div class="Techandfunzone-tab" id="Techandfunzone-tab"></div>
<script>
var tabbedTAB={blogUrl:"https://www.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:' – <em style="color:#ff0000;">New</em>'};
!function(a,b){var c=(new Date).getTime(),d={blogUrl:"https://Techandfunzone.eu.org/",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:' – <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)+"…":""),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>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 Label.
If there is only one Post that doesn't have a Label, then the Sitemap Script will not work.
Recommended Articles
Final Words
Hopefully, the Above tutorial has completely helped you to How to Add Sitemap Page in Median UI theme. If you have got any issue in understanding this tutorial. Then in fact you'll be able to inquire from me by commenting or Contact us
Was it helpful? If it was then don’t forget to share this article with your other friends too. Thank you for visiting. Happy Blogging..
© Tech & Fun Zone