How to Create a Sitemap: Blogger HTML Sitemap

Blogger is one of the best and most popular free blogging platforms. Most of the people want to use this excellent google product because it is the totally free hosted platform. The newbies prefer blogger as their blogging platform. I have already told that if you just starting you can use blogger then you will migrate from blogger to WordPress. Because you get more facilities on WordPress as an advanced blogger. There are different widgets and pages we must add to blogger blog for different purposes. You need to create a responsive HTML sitemap page in blogger. Here I show you how to create a sitemap that means’s HTML sitemap.

How to Add WhatsApp Share Button to Blogger Blog

A sitemap is one of the most important issues for your blog. You can easily create a sitemap in WordPress using different plugins. But in blogger, you need to know how to create a sitemap manually.

Add Animated Flying Twitter Bird Widget to Blogger Blog

The sitemap is an SEO factor. It makes your blog more user-friendly. If you create a responsive HTML sitemap page in blogger, it looks professional. It helps the visitors to get your all contents within a short time. Search engines crawl your all posts and pages easily if you add a sitemap to your blog. So you must know how to create a sitemap?

Add Google Plus Page Badge to Your Blog Easily

We mainly know about XML sitemap because it is a default sitemap. But here I am talking about HTML sitemap page.

How to Create a Sitemap: HTML Sitemap Page

  • Login to blogger Dashboard. Then click on Pages >> New page.

How to Create a Sitemap

  • Now click on HTML part, not Compose.
  • Copy the following code and paste the code on HTML part of New page.
<script src="" type="text/javascript"></script>
<script src=";alt=json-in-script&amp;callback=loadtoc"></script>
<style type="text/css">
.post-archive {width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .50s ease-in-out; -moz-transition:all .50s ease-in-out; -o-transition:all .50s ease-in-out; transition:all .50s ease-in-out;text-decoration: none; }
.ct-columns-3 p a:hover { background: #fff; color: #555;text-decoration: underline; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }

(This code is written by

  • You need to replace with your site’s URL.
  • Finally, click on Publish. That’s all.

You have done. Hope now you know how to create a sitemap in blogger.

Munna Hossain

Hello, I am Munna Hossain. I am a professional blogger and affiliate marketer. I am interested in technology, blogging, SEO, and WordPress. My blog Mytechgoal provides you all information about technology, blogging, SEO, and affiliate marketing.

Click Here to Leave a Comment Below 0 comments