How to Make a Your Own Sitemap.xml on Blogger

Hello everyone, I have noticed that some of you find it hard to make your own sitemap.xml for your blogsite. So here, I made a tutorial for you all to follow.

What is Sitemap?

A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Source

A sitemap can be useful in many terms, for example, this can serve as an index for all your blogpost, much like of a table of content. In that way, your readers won't go scrolling and clicking next page just to find what they wanted to read. For blogging experts, having a sitemap helps your blogsite become more efficient and rank high on SEO. 

How to Make A Sitemap for your Blogger Website?

In order to be able to make your own sitemap, please know first to have some basic information about Blogger (website) and it's menu's.

Requirements:

• Web Browser (Chrome, Mozilla, Opera Mini
• Internet Connection
• Laptop, PC or Smartphone
• Blogger Account
• Basic Knowledge

Note: In this tutorial, I will be demonstrating the steps using a mobile phone.

Instructions

1. Open your Google Chrome, in my case I am using Brave Browser.

2. Login into your Blogger account.

3. Once you were logged-in, create a New Page by going "Hamburger Menu > Page > then Click the + button"

see screenshot

4.Write your Title as "Sitemap"

5. Click the Pen Icon on the upper left side corner to switch your canvas to "HTML View"

Note: If there are pre-coded text, just delete it.

6. Copy and paste the code given below:

HTML

 
<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://yoursite.here.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>

7. After posting, do not publish it! We will modify some information inside the code.

8. Replace yourwebsite.here with the site you own.

9. After replacing, you can now publish your new page.

How to Fix no Post Displayed on Sitemap?

Sometimes the sitemap won't appear and it may be caused by some reasons, you can make sure that the below setting was properly set.

• Make sure that the website feed is active and set full.
• Make sure that all posts has "labels". Even only one post that has no label will affect the code and won't display sitemap.

Thank you for reading my tutorial, if you find this post helpful please consider sharing it to your friends. 

Thank you!