How To Make A Beautiful HTML Sitemap in Blogger

Today I will show you How To Make A Beautiful HTML Sitemap Page in Blogger. Before getting into the tutorial we need to know, what is mean by sitemap.

What is Sitemap?

According to Wikipedia:
A sitemap is a list of the pages on your website. It helps Google and other search engines to crawl your website properly. A sitemap is a map for the search engines.

The above lines were about the XML Sitemap. But the sitemap we are going to make today is an HTML Sitemap.

What is The Difference Between XML Sitemap and HTML Sitemap?

XML Sitemap is a map for the search engines and HTML Sitemap is a map for the visitors of your website.
To navigate your website easily sitemap is very important to search engines and to the visitors. So, if your website has a sitemap, it will help you to get more clicks from the search results. Also, it will increase the number of visitors in your website.

We are going to make a sitemap like the picture below.
Demo

How To Make A Beautiful Sitemap in Blogger:

Step 1: At first login your blogger dashboard.
Step 2: Navigate to Pages >> New Page. Now click on New Page.

Step 3: Enter "Sitemap" in the title field and switch to HTML mode.

Step 4: Now put the following code into the blank box.

Note: Clear any default code inside HTML field before pasting provided code.

Read: How To Share Code Snippets into Blogger Post

<div id="bp_toc">
</div>
<script src='http://sajidblue.xtgem.com/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>

<style>
/* Sitemap plugin By SAJIDCH */
#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>

Note: Dismiss any type of HTTPS error.

Step 5: Under Page Settings do the setup like the picture below.

Step 6: Now Publish your Sitemap page and enjoy it.

Read: How To Make A Srollable Table Based HTML Sitemap On Blogger.

So, friends that were the tutorial about how to add an html sitemap in blogger blog. If you have any issues please feel free to comment.