How to Create a Sitemap Page on Blogger in 2021 [Full Guide]

A sitemap is a page that contains maps or paths of all articles on a blog. The site map function is similar to the book's table of contents. With the site map, visitors are expected to be able to find and access all the articles on the blog.

We use a static page format or static page to create a site map page when creating our contact page, which is explained in the next article. Creating a site page means that a page is being created here that can automatically display the entire article on the blog. So we don't have to enter the title of the article one by one on the site map page.

Sitemaps or sitemap pages work to facilitate navigation within the blog. With a site map page, visitors are expected not to be "lost" when visiting our blog because they already have a "map". The sitemap page also serves to facilitate search engines while indexing indexed articles on the blog, so the site map also serves to direct crawlers from search engines so that they are not "lost" to our blog.

How a site map page is created on Blogger or Blogspot is actually very easy. All we need to do is to create a script that automatically displays all article titles using the available article feed feature. We make scripts in JavaScript format with some CSS code to make the appearance more interesting.

Here's how to create a sitemap page on Blogger [Full Guide]

1. Create a new page by clicking the Page menu then clicking New Page.

2. Name the new page Sitemap.

3. Click on the HTML tab to change the text editor mode.

4. Insert the following code in the content page.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#twistblogg{
width:99%;  
margin:5px auto;
border:1px solid #05a0ff;  
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#c2eafe 0%,#05a0ff 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#05a0ff),color-stop(1,#c2eafe));
border:1px solid #37c2dd;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #a0a0a0;
-moz-box-shadow:3px 3px 1px #a0a0a0;-webkit-box-shadow:3px 3px 1px #a0a0a0;display:block;
}
.labl a{color:#fff;
}
.labl:first-letter{text-transform:uppercase;
}
.new{color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.50,#fff),color-stop(1,#C2EAFE));
}
.postname li{border-bottom: #ddd 1px dotted;
margin-right:5px
}
.postname li a:before{font-family:fontawesome;content:'\f0a4';padding-right:10px}
}
.sidebar, #bottom, #blog-pager, h2.post-title, .comments {
display: none !important;
}
#content { width: 100% !Important; }
@media only screen and (max-width: 1089px) and (min-width: 980px) { #content { width: 100% !Important; } }  @media only screen and (max-width: 979px) and (min-width: 768px) { #content { width: 100% !Important; } } @media only screen and (max-width: 767px) and (min-width: 480px) { #content { width: 100% !Important; } }  @media only screen and (max-width: 479px) { #content { width: 100% !Important; } }
</style>

<br />
<div id="twistblogg">
<script src="https://amanbhattarai4400.github.io/csshosting/sitemap.js" type="text/javascript"></script>
<script src="https://www.onlinewebbeast.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
</div>

Note: Change the https://www.onlinewebbeast.com address with the name of your blog.

5. When finished, click Publish.

6. The sitemap page will be published with the URL address p / sitemap.html.

7. Please add a link to the Sitemap page on the menu.


8. The following is an example of a site map page display on a science-writing blog:

9. When we open this site map page it is a bit slow because the process of indexing all the pages on the blog requires a relatively long time depending on the number of articles and the speed of the internet network we use.


How to create a site map page on Blogger / Blogspot. To adjust the appearance of each blog, simply edit the CSS code in the Site Map page before it, adjusting the padding, margins, colors, and according to their personal tastes.

Thank You...!