How to Build an HTML Sitemap Page for Blog

The regular reader of our blog is aware of the almost post of our blog, but the new visitor is about to have a very low post. If he wants to read all our posts then he has a lot of trouble. We show maximum 10 posts in the homepage. That is why the reader has to go to the next page to read the rest of the post. When our blog has a Sitemap, it has the title and link of all posts, which makes reader easy to read.

Blogger platform is mostly new blogger. If you are a great blogger and you have a good knowledge about blogging, then you know that blogging is very easy for anyone but much more difficult for people. That’s why if your blog is in Blogger then it is easy to know that there is a new blogger too.

A lot of futures and options have been given in Blogger. Sometimes you may have visited such blogs in Blogger, but its design is exactly like wordpress blog. If you have information on Coding, you can also design your blog in this way. If you are not the author of coding, then this is the biggest problem that you are unable to manage your blog properly on Blogger. But now you do not need to take tension because I continue to share related articles with Blogger of this blog. So you can easily design and manage Blog. I am telling you to create HTML sitemaps today To create a Sitemaps page, you also have to use coding. So let’s talk about Sitemaps from Details.


What is site map


All the posts in our Blog in the Sitemap are Link and Title. There is a list of all the posts in the same page. Sitemaps is of 2 types.

  • XML Sitemap – This is in the sitemap.xml file. In this, the search engine’s preferred script is used and it is only made to submit to the search engine. When submitting a .xml sitemap to the search engine, the sitemap has a post list and index it by filtering it to the search engine bot.
  • HTML Sitemap – also has the URL and title of posts. It is well-designed so that anyone recognizes well and the title of the post is clickable. This is made for blog visitors, not for the search engine. So that visitors can read their favorite posts.

So sitemap these are two types and both work is different. Making a sitemap of xml and html for blog is very important. We have already told you to create xml sitemap and today we are talking about creating HTML sitemap pages.


How to Build an HTML Sitemap Page for Blog


Creating an HTML sitemap for Blog is very easy. In it, just add some script to the blog page. For this you follow the steps mentioned below carefully and you can easily create a sitemaps.

Step 1> Firstly copy the given code below.

<style>
#bp_toc {
    color: #666;
    margin:  auto;
    padding: ;
    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:  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='http://lsvdpr.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>

Step 2> Login to Blogger and go to your Blog Dashboard.

  • Now click on Pages.
  • Click on the new page.

Step 3>

 

  • Type SiteMap or All Posts in Title.
  • Now click on the HTML tab.
  • Paste the code copied here.
  • Now click on the Publish button.

 

Now visit you on page! Your Sitemaps page may have been ready. In this way you can create a Sitemaps page in Blogger.