HTML sitemap is crucial for any blog or website. It helps both users and search engines to easily navigate your content. Having a HTML sitemap page on a blogger site can improve seo and provide better user experience. In this post, I will show how to add an html sitemap page in blogger.
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 a clear and organized way. There are two main types of sitemaps: HTML sitemaps and XML sitemaps.
- HTML Sitemaps are designed for users. It is like a table of contents and helps visitors quickly find what they are looking for.
- XML Sitemaps are made for search engines and it is a crucial factor for any site. It helps search engines to understand the structure of a site and find all the pages so they can be properly indexed.
In short, a sitemap makes a website easier to navigate for both visitors and search engines.
How to Add HTML Sitemap in Blogger
Follow the steps below to create an automatic html sitemap page on your blogger blog.
1. Access your blogger dashboard
2. Click on the “Pages” tab on the left sidebar and then click on the “New Page” button.
3. Give a title for the new page. For example: “Sitemap“
4. Inside the page editor, click on the “HTML view” to switch to the html editor.
5. Now, copy the following code and paste it on the html editor.
<script defer='defer' src='//dte-project.github.io/blogger/tabbed-toc.min.js?active=0&load=0&ad=false&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. Click on the “Publish” button to publish the html sitemap page.
That’s it!
You have just created an automatic html sitemap page for your blog. Now, your readers can access this sitemap page to easily find what they are looking for.
Final Thoughts
A dedicated html sitemap page is an effective way to improve seo. This script will generate an automatic sitemap in no time. It will help you to boost your blog’s visibility and improve better user experience. Please remember to check the html sitemap page regularly to ensure it continues to serve its purpose.