How to Create HTML Sitemap in Blogger?

How to Create HTML Sitemap in Blogger?

Do you want to create HTML Sitemap in Blogger? Follow the below steps carefully to create HTML Sitemap for Blogger, and make your blogger blog look fabulous, first let's understand What is a Sitemap and What is the need of 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 sitemap?

While doing the Search Engine Optimization, we have a tendency to submit our sitemap to the search engines. By doing this we gives 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 web site 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 web site.

What is the need of HTML Sitemap?

As we all know blogger provides an .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?

I will guide you to Create HTML Sitemap for Blogger, Ok, let’s begin!

Step 1. At first, you need to go to the Blogger dashboard i.e. Blogger.com.

Step 2. Go to the Pages Section and Click New Page Button.

Step 3. Click on the Pencil Icon and then click Edit HTML.

Step 4. 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>

Step 5. Paste the code in the HTML section of your sitemap page.

Step 6. Replace the https://www.blogaddress.com with your blog address.

Step 7. Click on Save!

This Sitemap is best Compatible with Median UI Theme.

Read More: How to Setup Cloudflare CDN with Blogger?

Conclusion

So friends, how did you guys like this post on How to Create HTML Sitemap in Blogger?Now you must understood How to Create HTML Sitemap in Blogger.

Tell us how you felt about this article on How to Create HTML Sitemap in Blogger? by writing a comment so that we too can have a chance to learn and improve something from your ideas.

8 comments

  1. thanks aman bro,
    working
    1. I'm glad to help you!! 🙂❤️
  2. thank you so much for providing such a quality article. It helped me a lot to create a sitemap on website.
    1. I'm glad to help you!! Happy Blogging 🙂❤️
  3. it shows only loading.. what to do for that.
    1. As checked, the code is working completely fine. Did you replace "https://www.blogaddress.com" with your blog address as mentioned in step number 6 ?
  4. Thank you, it's working
    1. Jai Shree Ram.
Don't spam links or promote stuff in the comments. It's annoying and lowers the conversation quality. Contribute respectfully and helpfully instead.