Stylish HTML Sitemap Page in Blog 2020

The most effective method to include Stylish HTML Sitemap Page in Blogger Site:- If your site is based on Blogger, you may confront heaps of issues. You can't utilize HTML sitemap in a blogger site. Since Blogger is free and obviously it has loads of astounding highlights yet additionally has a few weaknesses of utilizing Blogger, for example, on Blogger webpage you can't introduce modules like WordPress website to make your webpage increasingly wonderful and SEO improved. In any case, I will disclose to you some remarkable deceives in this post work extraordinary, with the assistance of these deceives you will have the option to include a polished HTML sitemap a static page of a Blogger site. So without sitting around, how about we start-

The most effective method to Create Responsive Sitemap Page for Blogger

Note:- Read and adhere to all the directions given beneath.

#Step 1

Go to Blogger Dashboard and snap on Edit Theme, your webpage's HTML code will open.

#Step 2

Seeing any vacant space in the code, move the mouse pointer and press Control + F from the console. Presently a pursuit window will open. In the inquiry box, search by composing ]]></b:skin> and glue the beneath code above ]]></b:skin>. After this, spare the format by tapping on Save Theme.

/* Sitemap plugin By */
#bp_toc {
color: #000000;
margin: 0 auto;
padding: 0;
border: 1px solid #000000;
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: #000000;
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;

#Step 3

Presently you need to make another page. For this, click on Pages, at that point click on New page and type Sitemap as the title. At that point you need to do the page from make mode to HTML mode, at that point reorder the code given underneath. At that point you need to tap on Options, presently select Don't permit peruser's remarks and distribute the page.

<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>

#Step 4

Presently you need to duplicate the URL of the distributed page and include it any place you need as a static HTML sitemap page.

Note:- If you are confronting any trouble including HTML sitemap page blogger blog at that point must watch the video given underneath. It will support a great deal.

My final word: In the present post, I revealed to you how you can without much of a stretch include an a la mode HTML sitemap page in a blogger site. I trust, you won't experience any difficulty now, on the off chance that there is any issue with respect to this post, at that point you can ask me by writing in the remark box and I will give a valiant effort to answer you at the earliest opportunity. On the off chance that you like my posts, at that point do tail me via web-based networking media.

Much thanks to you such a great amount for perusing this post!

Tag:-sitemap for blogger,
sitemap generator,custom robots txt blogger generator,
html sitemap generator,unlimited sitemap generator,atom sitemap generator,
sitemap for blogger html,blogger link generator,html sitemap generator,
generate sitemap for blogger,
how to create xml sitemap,
generate sitemap wordpress,
blogger sitemap generate xml sitemaps for google and bing,
how to add sitemap in blogger,
sitemap extractor,
sitemap in html and css,

Post a Comment