Notice: Follow our newsletter for the latest article ↳Click me

How to add stylish sitemap to blogger?

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

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
Website development, Canva design, video and article writing.

Post a Comment

If you benefited from reading the post, don't forget to leave a comment!