Blogger Sitemap Generator
Join Our Official Telegram and Youtube Channel. Telegram | Youtube
Home
Blogger
SEO

Blogger Sitemap Generator

Blogger Sitemap Generator

Blogger Sitemap Generator will be discussed in this article. The Blogger Sitemap Generator Tool will generate a complete XML sitemap of your Blogger blog with all your blog posts and not just the recently published blog posts. 

We will learn how to generate and set up an HTML sitemap in Blogger. Just follow the easy steps given below.

But before setting up a Sitemap, let's understand what is a sitemap and what are the advantages of having a sitemap on a website.

blogger sitemap generator,
Blogger Sitemap Generator

What is a Sitemap?

A sitemap is a file where you provide information about the pages, videos, and other files on your site. It helps Search Engines like Google, Bing, and Yahoo to crawl your site efficiently and eventually indexing of pages quickly.

It tells the search engine about essential pages and files of your website and also provides valuable information about these files.

For example, it helps in identifying information like the last update and how often the page is changed, and any alternate language versions of a page.

Types of sitemaps:

There are two types of sitemaps:
  1. HTML Sitemaps
  2. XML Sitemaps
XML Sitemaps are further divided into the following types:
  1. Image Sitemaps
  2. Video Sitemaps
  3. News Sitemaps
  4. Mobile Sitemaps

HTML Sitemap:

An HTML sitemap is an HTML page on which all subpages of a website are listed in an organized way and generally, it is found in the Footer area of the website.

HTML sitemaps are mainly created for users, as they help them to get an overview of the structure of your site and to navigate through all the subpages of your website.

It also helps search engines to better understand your content and index quickly in the search results.

Adding an HTML sitemap in Blogger is very easy. You just need to add a simple HTML code given below to your page section. 

Just follow the instructions given below and your Html sitemap will be ready in less than 1 min. If you face any difficulty check out the video given below. 

Steps to add an HTML sitemap in Blogger

To add a stylish sitemap to your Blogger website you need to add an HTML code and create a page named sitemap.

Step-1: Go to your Blogger Dashboard and open the Page section.
Step-2: Create a new page and switch the Editor to HTML view.
Step-3: Now copy the below code and paste in it.
Step-4: Now set the title as Sitemap and publish the page.

Now you have successfully created your stylish HTML sitemap on the Blogger website.

Code for HTML sitemap:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-s3kuUoVBLD4/Xx1if5ogHbI/AAAAAAAAAUU/EshioquzFfYPf2n49rUhm0_kjdeSMUnFACLcBGAsYHQ/s1600/Sitemap%2BArlina%2BCode.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="https://3.bp.blogspot.com/-s3kuUoVBLD4/Xx1if5ogHbI/AAAAAAAAAUU/EshioquzFfYPf2n49rUhm0_kjdeSMUnFACLcBGAsYHQ/s1600/Sitemap%2BArlina%2BCode.png" title="Sitemap Arlina Code" /></a></div>

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7}
#bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
#bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
@media screen and (max-width:768px) {
#bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}
</style>

After pasting the code your HTML sitemap is auto-generated. You can see the Post name, date, and label name in a tabular form as shown in the below screenshot. You can also check the demo on our Sitemap page in the Footer section.

 Add stylish HTML sitemap in Blogger

The new stylish sitemap for Blogger (2021)

If you want to add a sitemap file with categories and a beautiful design then you can check the below sitemap preview. 

Here you can show the posts category wise and you can also display the thumbnail of the blog post (if you want) and you can display the date published etc. 
new stylish sitemap for blogger

Download the code for this sitemap

The process of adding this HTML sitemap is just the same as above. so, just replace the previous code with this code and your sitemap is ready. 

New HTML Sitemap for Blogger

HTML sitemap in Blogger website 
 <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>

➤If you face any problem ask me in the comment section or join us on social media platforms for faster resolution.

Also, share your feedback about this new stylish HTML sitemap on Blogger, and do share it with your friends.

Frequently Asked Questions

How to create a free Blogger Sitemap?

How to create a free Blogger Sitemap? Although Blogger does not provide a classic XML Sitemap, an alternative is to use a built-in Atom RSS feed as the Sitemap. The following template demonstrates how to get your site's feed URL from Blogger: http://yourblogname.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500 your blog name – is your blog's domain. And if you replace 500 with another integer at the end of the URL string, you can adjust the number of web pages it displays.

Is it possible to create a Blogger Sitemap manually?

Unfortunately not. The crux of this problem is that Blogger users do not have access to upload XML files to their site, and thus you cannot create a link to submit the file to search engines.

Final Thoughts!

Blogger Sitemap Generator set up in Blogger is discussed in this article. The Blogger Sitemap Generator Tool will generate a complete XML sitemap of your Blogger blog with all your blog posts and not just the recently published blog posts.

Post a Comment

Post a Comment