Join our official Telegram Group to get daily updates. Join Now

How to Create HTML Sitemap Page in Median Ui v1.5 | Sitemap Page for Median Ui

How to Create HTML Sitemap Page in Median Ui v1.5 | Sitemap Page for Median Ui

Hello Guys, Welcome to ASThemesWorld. Today's article is about "How to Add HTML Sitemap Page in Median Ui v1.5" template. So follow the some easy steps to add attractive, stylish sitemap page in Median Ui v1.5.

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.

Sitemap Page Demo

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. Second, give the Sitemap title to the page. Now switch to HTML Mode and delete whatever inside in HTML Mode.
Step 3. Now, copy the code that is given below and paste it in HTML section of your sitemap page.

<!--Median Ui v1.5 Sitemap Page Codes by ASThemesWorld-->
<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.asthemesworld.xyz/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 add your blog address in place of https://www.asthemesworld.xyz and then click on 'Publish'.

If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button.

Click To Download

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.

Thanks for visiting our website. If you have any questions please put in comment box, I will reply as soon as possible.

© Copyright ASThemesWorld

6 comments

  1. Thanks for tips , From Vietnam
    1. Your Welcome....😊
  2. this code was working on my blog.. i do not know what happened that is not working right now. pls help me
    1. Bro, I think there might have been an error occured in the code due to not copy-pasting the sitemap's code properly. Download the codes of the sitemap and check whether it is working or not. And if you are using blogger in mobile then open it in desktop mode and paste the code.

      Let me know if it's ok and contact me on Telegram if you still have problem.
    2. First i exported and uploaded my current theme back. After that i added sitemap codes to it's page. it is working right now. thanks.
    3. Your welcome and thanks for letting me know. 😊😊