Add Stylish HTML Sitemap Page in Blogger Blog (Step by Step) - [2020]

Stylish HTML Page for Blogger 

HTML Sitemap Page for Blogger Website by Dikifeed

How to add Stylish HTML Sitemap Page in Blogger Site:- If your website is built on Blogger, you may face lots of problems. You cannot use HTML sitemap in a blogger website. Because Blogger is free and of course it has lots of amazing features but also has some disadvantages of using Blogger such as on Blogger site you cannot install plugins like WordPress site to make your site more pleasant and SEO optimized. But I will tell you some outstanding tricks in this post that work great, with the help of these tricks you will be able to add a stylish HTML sitemap on a static page of a Blogger website. So without wasting time, let's start-

How to Create Responsive Sitemap Page for Blogger

Note:- Read and follow all the instructions given below.

#Step 1

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

#Step 2

Seeing any empty space in the middle of the code, move the mouse pointer and press Control + F from the keyboard. Now a search window will open. In the search box, search by typing ]]> </b: skin> and paste the below code above ]]> </b: skin>. After this, save the template by clicking on Save Theme.

/* Sitemap plugin By Dikifeed.com */

#bp_toc{color:#000;margin:0 auto;padding:0;border:1px solid #000;float:left;width:100%}span.toc-note{display:none}#bp_toc tr:nth-child(2n){background:#f5f5f5}td.toc-entry-col1 a{font-weight:700;font-size:14px}.toc-header-col1,.toc-header-col2,.toc-header-col3{background:#05d83b}.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:.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:#000;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:0 11px 1px 6px;margin-right:15px}td.toc-entry-col2{text-align:center}

#Step 3

Now you have to create a new page. For this, click on Pages, then click on New page and type Sitemap as the title. Then you have to do the page from compose mode to HTML mode, then copy and paste the code given below. Then you have to click on Options, now select Don't allow reader's comments and publish the page.

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

Now you have to copy the URL of the published page and add it wherever you want as a static HTML sitemap page.

Note:- If you are facing any difficulty adding HTML sitemap page on blogger blog then must watch the video given below. It will help a lot.

Read:  Download Optima Blogger Template - Fast, Clean and SEO Friendly

My last word: In today's post, I told you how you can easily add a stylish HTML sitemap page in a blogger website. I hope, you will not have any trouble now, if there is any problem regarding this post then you can ask me by writing in the comment box and I will do my best to answer you as soon as possible. If you like my posts, then do follow me on social media. 

Thank you so much for reading this post!