How to Add an HTML Sitemap in Blogger

Imagine your blog has hundreds of posts published in different categories and you have a decent number of active readers. Sounds great, right? However, do you know that many bloggers have lost a large number of their audience just because of bad navigation? So what about your site? Do you have a user-friendly navigation? Probably not, that's why you are here.

Having easy navigation through a HTML sitemap page is crucial for a blog. It helps both users and search engines to navigate website easily. A html sitemap page for blogger can significantly improve your website's seo and provide a better user experience.

Today, I will show you how to add html sitemap in blogger. The best part is that you don't need any coding knowledge. Our html sitemap script is smart and automatic.

What is a Sitemap?

A sitemap is like a roadmap for a website. It is a file or page that lists all the important pages, posts or sections of a site in an organized way. There are two main types of sitemaps: HTML sitemaps and XML sitemaps.

HTML Sitemaps

A html sitemap is mainly designed for users. It is like a table of contents that helps visitors quickly find what they are looking for.

XML Sitemaps

Xml sitemap is crucial for search engines. It helps search engine crawlers understand the structure of a site and find all the pages so they can be properly indexed. You can control which pages they can access and which they can't.

In short, a sitemap makes a website easier to navigate for both visitors and search engines.

How to Add HTML Sitemap in Blogger

Note: Make sure your website's reader access is set to Public.

1. Go to your blogger dashboard

2. Navigate to the Pages section in the left sidebar.

3. Click on the New Page button and then give a page title. For example: "Sitemap"

4. Inside the page editor, switch to the HTML View.

5. Now, copy and paste the following code into the html editor.

<script defer='defer' src='//dte-project.github.io/blogger/tabbed-toc.min.js?active=0&amp;load=0&amp;ad=false&amp;date=false'></script>
<style>
.tabbed-toc{border:0;font-size:15px}.tabbed-toc-tabs{width:10em;font-size:14px}.tabbed-toc-tab{padding:0 15px;border-radius:3px 0 0 3px;position:relative;transition:all .1s ease;color:inherit}.tabbed-toc-tab::after{content:'';position:absolute;top:0;bottom:0;right:0;border-right:1px solid #ddd;opacity:0}.tabbed-toc-tab:hover,.tabbed-toc-tab.active{background:#f6f4f4}.tabbed-toc-tab:hover::after,.tabbed-toc-tab.active::after{opacity:1}.tabbed-toc-tab.active{color:#0043ff;opacity:.7}.ltr .tabbed-toc-panels{border-color:#e6e6e6}.ltr .tabbed-toc-time{position:relative;font-size:12px;opacity:.7}.tabbed-toc li{padding:5px 7.5px;line-height:1.6em;min-height:40px;display:flex;align-items:center;justify-content:space-between}.tabbed-toc li >*{padding:0 7.5px;margin:0}.tabbed-toc a{color:inherit;text-decoration:none}.tabbed-toc-title{font-size:16px}.tabbed-toc-title sup{font-weight:400;font-size:12px;color:red}@media screen and (max-width:750px){.tabbed-toc nav{display:flex;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.tabbed-toc nav::-webkit-scrollbar{width:0;height:0}.tabbed-toc nav::-webkit-scrollbar-track{background:transparent}.tabbed-toc nav::-webkit-scrollbar-thumb{background:transparent;border:none}.tabbed-toc-tab{border-radius:3px 3px 0 0;white-space:nowrap;flex-shrink:0;scroll-snap-align:start}.tabbed-toc-tab::after{top:auto;left:0;border-right:0;border-bottom:1px solid #204ecf}.tabbed-toc ol{margin-top:15px;padding:0 15px;list-style:decimal}.tabbed-toc li{display:list-item;padding:5px 0;overflow:visible;list-style:inherit}}@media screen and (max-width:500px){.tabbed-toc-title{font-size:15px}}
</style>

6. Finally, click on the Publish button to publish the html sitemap page.

Boom! You have created an automatic html sitemap page for your blogger site. Now you can visit the page to see how it looks and test the navigation.

Now your readers will no longer struggle to find what they are looking for. Also, you will notice your site's seo will improve.

If this post helps you, please share it with others. And follow us for more blogger tips and tricks.