Create HTML and XML Sitemap in Blogger

Would you like to make HTML Sitemap in Blogger? Follow the beneath steps cautiously to make HTML Sitemap for Blogger, and make your blogger blog look marvelous, first how about we get What is a Sitemap and What is the need of HTML Sitemap 

What is Sitemap? 

Sitemap assumes a significant part in On-Page SEO. Anyway the essential inquiry that spins to us is what is sitemap? 

While doing Search Engine Optimization, we tend to present our sitemap to the web search tools. By doing this we gives a sitemap or a rundown of pages and presents on the web crawlers to file. 

Create HTML and XML Sitemap in Blogger


Sitemap is an .xml document. It contains all the data of our site. For example, which rate pages and posts are there on are, the place where are the pictures and different media documents and so on 

This framework gives all the information on the site to the web search tools. So when the crawlers of web search tools return, they are doing not have any downside in total data from the site. 

What is the need of HTML Sitemap? 

As we as a whole realize blogger gives an .xml sitemap which looks terrible, all things considered .xml it isn't comprehensible and easy to understand, consequently to show our guests an easy to use simple to peruse sitemap we use HTML sitemap. 

Utilizing the beneath steps you can make HTML Sitemap in Blogger by changing a few pieces of the code given underneath. 

How to Create HTML Sitemap in Blogger? 

I will direct you to Create HTML Sitemap for Blogger, Ok, how about we start! 

Stage 1. From the get go, you need to go to the Blogger dashboard for example Blogger.com. 

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

Stage 3. Snap on the Pencil Icon and afterward click Edit HTML. 

Stage 4. Duplicate the code beneath. 

<!--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>

Stage 5. Glue the code in the HTML part of your sitemap page. 

Stage 6. Supplant the https://www.blogaddress.com with your blog address. 

Stage 7. Snap on Save! 

This Sitemap is best Compatible with Median UI Theme. 

Conclusion

So companions, how could you all like this post on How to Create HTML Sitemap in Blogger?Now you should saw How to add Animated Logo in Blogger. 

Reveal to us how you felt about this article on How to Create HTML Sitemap in Blogger? by composing a remark with the goal that we also can get an opportunity to take in and further develop something from your thoughts.

See Also :