How to Create a Simple HTML Sitemap Page In Blogger

Content is free. When you buy through links on my site, I may earn affiliate commission. Learn More.

Sitemaps allow all blog pages to be crawled by search engines. A Sitemap page helps readers easily navigate the page and helps them find the posts they are looking for. HTML sitemap will display all category posts on one page.

What Is HTML Sitemap?

HTML sitemap is a standard HTML page that both search engine bots and visitors can read. Web crawler treats it (with many links) as a standard HTML page. The main purpose of using an HTML-based sitemap is to display all of your posts in an organized way so that all of your posts can be navigated through a single page.

Why Your HTML Sitemap Page is Important?

All of your site's content should be clickable. But some of your old blog posts or deep pages may take quite a few page links and clicks to access them. If you create an HTML Sitemap page and place the link in your footer, within 2 clicks, you have links to all the important content on your web! For both visitors and search engines, this is useful. It may increase the likelihood of being indexed by the search for that old but essential content. All of this enhances search opportunities for people to find your website and content.

How to Create a Simple HTML Sitemap Page in Blogger:

1. Go to Pages on blogger and Create New Page name it Sitemap
2. Copy and Paste the following Code inside the page.

3. <style>
   #bp_toc {
       color: #666;
       margin: 0 auto;
       padding: 0;
       border: 1px solid #d2d2d2;
       float: left;
       width: 100%;
   }
   span.toc-note {
       display: none;
   }
   #bp_toc tr:nth-child(2n) {
       background: #f5f5f5;
   }
   td.toc-entry-col1 a {
       font-weight: bold;
       font-size: 14px;
   }
   .toc-header-col1,
   .toc-header-col2,
   .toc-header-col3  {
   background:#9E9E9E;
   }
   .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: 0.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: #666;
       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: 0px 11px 1px 6px;
       margin-right: 15px;
   }
   td.toc-entry-col2 {
       text-align: center;
   }
   </style>
   <div id="bp_toc">
   </div>
   <script src='https://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>
   

4. Publish The Page