Blogger Sitemap Image

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 to 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 to your website.

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

How To Make A Beautiful Sitemap in Blogger:

Step 1: At first log in 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.


Blogger Sitemap Demo Image
Blogger Sitemap Demo Image

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

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

Read: How To Share Code Snippets into Blogger Post

<div id=”bp_toc”>
<script src=’’ type=”text/javascript”></script>
<script src=”/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc” type=”text/javascript”></script>

/* 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-col3 {
.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-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 {
#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;

Note: Dismiss any type of HTTPS error.

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


Blogger Sitemap Tutorial
Blogger Sitemap Tutorial demo image

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

Read: How To Make A Scrollable 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.

1 thought on “How To Make A Beautiful HTML Sitemap in Blogger”

Leave a Comment

Your email address will not be published. Required fields are marked *