How to Add HTML Sitemap Page in Blogger 2021

 Is it accurate to say that you are hoping to add or create an HTML sitemap in WordPress or Blogger?

How to Create Sitemap Page for Blogger in 2021

What is an HTML Sitemap?

HTML Sitemaps are not the same as XML Sitemaps that you submit to search motors to improve your slithering rate or get a fast indexation of your new posts. HTML Sitemaps shows a sorted out rundown of your distributed posts, much the same as a list of chapters. In this article, we will tell you the best way to add an HTML Blogger SItemap Page. 

XML Sitemaps VS HTML Sitemaps 

An XML created with the assistance of an XML markup language and is uncommonly planned for search motors. You can create and present your webpage's XML sitemap in website admin instruments, which won't just improve your website's slithering rate yet additionally brisk indexation of your webpage. 

Then again, HTML sitemaps are created with plain XML Markup Language and are extraordinarily proposed for your site guests. It is normally used to list all the posts or pages that are distributed on your site. 

Check Demo of HTML Sitemap Page in Blogger 

How to Create an HTML Sitemap With All Posts in Blogger

Stylish HTML Sitemap For Blogger and WordPress

To add an HTML sitemap for Blogger please adhere to the beneath guidelines accurately: 

1.The absolute first thing you have to do is to add the CSS codes so you can make your sitemap look appealing. Go to Blogger >> Template >> Edit HTML >> Search for ]]></b:skin> tag and simply above it glue the accompanying code. You can likewise alter the beneath codes to coordinate your style of layout shading plan: 

/* Sitemap plugin By Tech 4 News */ #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; }

2.Once everything is done, press the Save Template button present at the highest point of your screen. 

3.Now Simply create another page where you need to show your sitemap. Go to Blogger >> Pages >> New page. In the Blogger page manager, select the HTML tab and paste the code in the HTML code editor: 

<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&max-results=9999&callback=loadtoc" type="text/javascript"></script>

4.After sticking the above code, you can compose the title of your page. In the event that you wish you can likewise cripple remarks since you dislike individuals posting remarks on your sitemap. Whenever everything is done, press the Publish button.

Reminder: What was your experience reading about  How to Add Sitemap Page in Blogger in 2021. Please share the Articles with your Friends and Comment on Your thoughts about this article.