How To Include HTML Sitemap In Blogger - Teckpas.com

📡 HTML-Sitemap-in-blogger

In this article, we are able to discover ways to generate and installation an HTML sitemap in Blogger.

What is a sitemap?

A sitemap is a record wherein you offer facts approximately the pages, videos, and different documents to your web page. 

It facilitates Search Engines like Google, Bing, and Yahoo to move slowly your webweb page correctly and sooner or later indexing of pages speedy.

An HTML sitemap is an HTML web page on which all subpages of a internet site are indexed in an prepared manner and generally, it's miles discovered withinside the Footer region of the internet site.

🌍 You also can discover the HTML sitemap of our internet site here.

HTML sitemaps are specifically created for users, as they assist them to get an outline of the shape of your webweb page and to navigate thru all of the subpages of your internet site.

It additionally facilitates search engines like google and yahoo to higher recognize your content material and index speedy withinside the seek results.

Adding an HTML sitemap in Blogger may be very clean. You simply want to feature a easy HTML code given underneath for your web page phase.

🌍 There are styles of sitemaps.

HTML Sitemaps

XML Sitemaps.

XML Sitemaps are similarly divided into the subsequent types:

Image Sitemaps

Video Sitemaps

News Sitemaps

Mobile Sitemaps

HTML sitemap

Steps to feature an HTML sitemap in Blogger.

To upload a elegant sitemap for your Blogger internet site you want to feature an HTML code and create a web page named sitemap.

Step-1: Go for your Blogger Dashboard and open the new Page.

Step-2: Create a brand new web page and transfer the Editor to HTML view.

Step-3: Now replica the underneath code and paste it.

Step-4: Now set the identify as Sitemap and put up the web page.

Now you've got got effectively created your elegant HTML sitemap at the Blogger internet site.

After pasting the code your HTML sitemap is auto-generated. You can see the Post call, date, and label call in a tabular shape as proven withinside the underneath screenshot. 

You also can take a look at the demo on our Sitemap web page withinside the Footer phase.

Copy your code

<div class='postSection sitemaps' id='sitemaps'> <div class='loading'>Sitemap is 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="/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:0px solid black;border-radius:5px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;} .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>

Add elegant HTML sitemap in Blogger

The new elegant sitemap for Blogger

If you need to feature a sitemap record with classes and a lovely layout then you could take a look at the underneath sitemap preview.

Here you could display posts category-smart and you could additionally show the thumbnail of the weblog post (in case you need) and you could show the date posted etc.

Thank you.