Do you want to create an HTML Sitemap in Blogger? Follow the below steps carefully to create an HTML Sitemap for Blogger, and make your blogger blog look fabulous, first, let's understand What is a Sitemap and What is the need for HTML Sitemap
What is Sitemap?
Sitemap plays an important role in On-Page SEO. However, the primary question that revolves in our mind is what is a sitemap?
While doing Search Engine Optimization, we have a tendency to submit our sitemap to the search engines. By doing this we give a sitemap or a list of pages and posts to the search engines to index.
Sitemap is an .xml file. It contains all the information of our website. Such as what percentage pages and posts are there on are, where are the images and other media files etc.
This system provides all the knowledge of the website to the search engines. So that once the crawlers of search engines return, they are doing not have any drawback in aggregation info from the website.
What is the need for HTML Sitemap?
As we all know blogger provides a .xml sitemap which looks very ugly, as it is .xml it is not readable and user-friendly, thus to show our visitors a user-friendly easy to read sitemap we use HTML sitemap.
Using the below steps you can create HTML Sitemap in Blogger by changing some parts of the code given below.
How to Create HTML Sitemap in Blogger?
- Go to the Blogger dashboard
- Go to the Pages Section and Click New Page Button.
- Click on the Pencil Icon and then click Edit HTML.
- Copy the code below.
<!--Sitemap Page-->
<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.blogaddress.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>
- Paste the code in the HTML section of your sitemap page.
- Replace the https://www.blogaddress.com with your blog address.
- Click on Save!
This Sitemap is best Compatible with Median UI Theme.