Tontuf TWL

Home
blogger

Make a HTML Sitemap Page in your Blogger Website

A sitemap is a file that lists all of the pages on your website. It helps search engines like Google to crawl and index your website more efficiently. This can lead to your website ranking higher in search results, which can bring in more traffic.

There are two types of sitemaps: XML and HTML. XML sitemaps are used by search engines to crawl and index your website. HTML sitemaps are human-readable pages that list all of the pages on your website in an organized way.

How to make a HTML Sitemap Page in your Blogger Website

In this article, we will show you how to create an HTML sitemap page in your Blogger website. This will help you to:

  • Improve the crawlability of your website by search engines
  • Provide a better user experience for your visitors
  • Make it easier for you to keep track of all of the pages on your website

Steps to create an HTML sitemap page in Blogger

  1. Go to your Blogger dashboard and click on the Pages tab.
  2. Click on the New page button.
  3. In the Title field, enter the title of your sitemap page. For example, you could enter "Sitemap" or "Table of Contents".
  4. In the Editor view, copy and paste the following code:
<div id="bp_toc">
</div>
<script src='http://mybloggerlab.com/js/sitemap.js'  type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
At last, Click on the Publish button.

After following these steps, now you need to do add the following below CSS codes in your Blogger Theme. To add this CSS theme, follow the steps below.
  1. Go to your Blogger dashboard and click on the Pages tab.
  2. Go to the Themes section of your Blogger Dashboard
  3. Click on "Edit HTML"
  4. Press "Ctrl + F" in your keyboard & type "]]></b:skin>" in the search box
  5. Copy and Paste the following CSS code, below the  "]]></b:skin>" tag in your Blogger theme.    
#bp_toc{color:#000;margin:0 auto;padding:0;border:1px solid #000;float:left;width:100%}span.toc-note{display:none}#bp_toc tr:nth-child(2n){background:#f5f5f5}td.toc-entry-col1 a{font-weight:700;font-size:14px}.toc-header-col1,.toc-header-col2,.toc-header-col3{background:#05d83b}.toc-header-col1{padding:10px;width:250px}.toc-header-col2{padding:10px;width:75px}.toc-header-col3{padding:10px;width:125px}.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:#fff;font-weight:700;letter-spacing:.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:5px;padding-left:5px;font-size:12px}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000;font-size:13px;text-decoration:none}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{text-decoration:underline}#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);min-width:1em;min-height:3em;float:left;border-right:1px solid #fff;text-align:center;padding:0 11px 1px 6px;margin-right:15px}td.toc-entry-col2{text-align:center}
 
At last, Click on the Save Icon at the top and Save your theme. 

Your HTML sitemap page will now be published and can be viewed by visitors to your website. You can also add it to your blog's navigation menu so that it is easy to find.


Live Tutorial Video: