How to add an HTML Sitemap Page in Blogger Website | Required Widget in Blogger for Adsense Approval

Hello Bloggers, ✋ In this article We will explain about, "How to add an HTML Sitemap Page in Blogger Website | Required Widget in Blogger for Adsense Approval".

Nowadays blogging is spreading worldwide. Millions of blogs are written every day on Google by lots of bloggers, and the motive of blogging is clear for everyone which is to earn money digitally as a passive income. 

We all know that most of the bloggers are earning from Google AdSense but most of the bloggers are still trying or waiting for approval from Google AdSense. but there are many requirements like minimum articles on the blog, templates which support AdSense, different pages, and many more before they approve your AdSense request. In this article, "How to add an HTML Sitemap Page in Blogger Website | Required Widget in Blogger for Adsense Approval" where we are explaining one of the above-mentioned requirements of Google Adsense, which is mandatory to add to your blogger website for easy and fast approval from Google AdSense.

What is Sitemap?

As the name suggested, Sitemap is a map of your site or we can say a blueprint of your website. there are two important types of sitemap which are XML Sitemap and HTML Sitemap. In this article, we are focusing on HTML Sitemap. 

HTML Sitemap is used in your website and it automatically syncs your all posted and upcoming posts on one page. you can see our sitemap by clicking here.

Why adding an HTML Sitemap is Required for bloggers?

Actually, Google Adsense looks for valuable and unique content, security of your viewers & a user-friendly environment on your blogger website while checking your website for approval. Sitemap really makes our website user-friendly. because your readers can look at all the posts of your website on one page also can be redirected to post which they want to read in a single click. Also, Sitemap help google crawling bot in crawling a website fast and easy, so it can help to make your website visible over the google search engine. That's why Google made it mandatory to add an HTML Sitemap Page in Blogger Website.

How to add an HTML Sitemap Page in Blogger Website?

Step 1: First, log in to your Blogger account by clicking here

Step 2: After login into your Blogger account look for the Pages tab in your blogger account.

Step 3: Now click on the New page tab.

Step 4: Now Give your page name as Sitemap, then change the view of your page editor to HTML View from the composer view, and then clear everything from here.

Step 5: Then copy & Paste the HTML coding exactly given in the below Text box on your sitemap page. This sitemap will look like our sitemap. you can see it by clicking here.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,Poppins,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:20%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Poppins,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,Poppins,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #05A6F7;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#F0F9FD;box-shadow:2px 0 7px rgba(0,0,0,.4);color:#000}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>

<br />
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Loading Sitemap…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script></div>

Step 6: Then press publish and select confirm.

Step 7: After publishing the page click share icon on the sitemap page and then select the copy link option.

Step 8: Now go to the layout option, in your blogger account.

Step 9: Then search & select the Link List option. (This step can be different for every user according to your website template, you need to find that list where you added about, privacy policy, disclaimer, or other pages.) 

Step 10: After finding out the Link List option then click on the edit button and scroll down and look for Add a new Item.

Step 11: Now type Sitemap, in the Site name and paste the URL in Site Url which we copied in step 7 and click on save twice and save the theme also by using the save button available at the bottom.

Step 12: Now, Click view blog, and hurrah. you can see the sitemap button is attached to your website as you selected in step 9.

We hope that now you know very well that How to add an HTML Sitemap Page in Blogger Website which is a Required Widget in Blogger website for Adsense Approval. Please share this article with your blogger friends, so they can also add an HTML Sitemap Page in their Blogger Website.

Also, we are providing a special discount on all amazon products, which is dependent on the product category, and Price. so if you are buying any product from Amazon, please let us know, by filling our contact us form, We will arrange a discount on it. Thank you