How to create blogger sitemap page on Blogger blog

Hello, friends welcome again today to discuss create a blogger sitemap page on Blogger blog. A sitemap page is very important on any website because it helps you find any post from your visitors through this site map. Your readers will be very profitable. 

The blogger's sitemap page is not provided by default in the admin panel. A sitemap page is created with HTML, CSS, and JavaScript. If you do not have a Sitemap page on your blog, then you have made a mistake on your blog. A sitemap page is important, even in other blogging WordPress and Tumblr like CMS.

Here we will mention all the codes that are used to create a blogger sitemap page on Blogger blog. The Sitemap page is like a table of contents of your blog, it lists all your post titles and pages, and if the user goes to the Sitemap page they can browse your previous post. Let's learn how to create sitemap pages on Blogger.
[ads id="midtop1"]
See Another post:
Sitemap page benefits on the blog.
  1. Any Top Ads-network fast approve your website example- Google AdSense.
  2. Any user finds your every post on this page very easily
So my recommendation everyone creates a blogger sitemap page on Blogger, It's very simple to follow my instruction and make it.

create blogger sitemap page on Blogger blog image

Create a blogger sitemap page all steps:

First work login to blogger. Then go to your theme option and Click Edit HTML option.

Past this CSS code head to head tag.  <head> to </head> -- save it. alert-info

<style scoped="" type="text/css">
#bp_toc {background:#008CDB;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;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:#aaa;font-family:'Trebuchet MS';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#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;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#comments {display:none;}

Second work, you can go create a blogger sitemap page and click HTML view mode. Paste this code. alert-info

<div id="bp_toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;"></div>
<script src='' type='text/javascript'></script> 
<script src=";max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

You can edit your Domain name. Past your Domain name and save it. Every work complete ready blogger sitemap page. alert-info

If you like this post, you can make other posts on your website in relation to bloggers about your beliefs.

Hopefully, friends have been able to tell you how to create a blogger sitemap page, if you have any questions, comment in the comments box. I'll try to answer soon.
Thank you by


  1. The difference involving the two may be the flexibility of making extra payments. mortgage calculator Once you know your estimated mortgage payment, you'll be better capable of compare home-buying options. canada mortgage calculator


Post a Comment