Notice: Follow to get latest blog post updates Click me

How to Create Stylish HTML Sitemap Page?How to Add Blogger Animated Responsive Sitemap?Blogger index on how to code HTML
Md. Anwarul Islam

Your Blogger website may require a sitemap, but having one may have various benefits:

1. Increasing SEO:

Blog sitemaps help search engine crawlers find and index information faster. This improves SEO and organic traffic.

2. Highlight key pages:

Use a sitemap to identify pages for search engine indexing. This is helpful for new blog entries, crucial landing pages, and archival material.

3. Indexing Problems:

Submission of your sitemap to Google Search Console lets you track indexed pages and find problems or blacklisted URLs. This helps you fix indexing difficulties and make your website search engine-friendly.

Not all Blogger sites with less than 100 pages and good internal links require a sitemap. Search engines may index sites without Blogger's sitemap. Quick overview for decision-making: Consider a sitemap for Blogger sites exceeding 100 pages. Select pages for indexing. Indexing issues. Blogger sites under 100 pages don't need sitemaps. Internal linkages function. Sitemap usage is optional. Consider your blog's size, structure, SEO goals, and indexing.

To create a Blogger sitemap, you must copy the following code and create a new one in Blogger. Then paste the HTML code and finally make it public.

<div class='sitemaps' id='sitemaps'>   <center>     <div class='loading' style='text-align:center'>
<svg class='line' viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>Loading...     </div>   </center>
</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: 1500};
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>
.loading{background:var(--contentB);box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:10px;justify-content:flex-start;align-items:center;}  
.sitemaps{font-size:14px}
.sitemapBox{padding:15px;background:var(--contentB);box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:10px;justify-content:flex-start;align-items:center; margin-top:25px; position:relative;left:-4px;right:-4px;width:calc(100% + 8px)}
.sitemapBox:not(:last-child){margin-bottom:20px}
.pBd .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--fontB)}
.sitemapTitle:before{content:'📁 '; 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(--fontB);line-height:normal; opacity:.7} 
.sitemaps .loading{display:inline-flex;align-items:center}
.sitemaps .loading svg{margin-right:3px;-webkit-animation:rotation 2s infinite linear}
@-webkit-keyframes rotation {from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}} 
.drK .sitemapBox{background:var(--darkBa)}
</style>

The sitemap page shows that your effort will succeed.

Reference

Internet

Post a Comment

If you benefited from reading the post, don't forget to leave a comment!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oh !
There is some problem with your internet connection. Please connect to the internet and start browsing again.