BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

How to Add Responsive Sitemap for Blogger


How to Add Responsive Sitemap for Blogger
Default Blogger Sitemap is no more elegant or beautiful than this Responsive Blogger Sitemap i'm gonna posting today.
You can have a look for our Sitemap - Check Our Responsive Sitemap
Demo How to Add Responsive Sitemap for Blogger

What is Sitemap ?

Sitemap is a map marked with the address of every page on your blog to lead search engine crawlers as well as visitors to where and what they are looking for.
By placing all the URLs on your blog at one place, the visitor can quickly find specific content he wants to read and search engine crawlers can easily index all the pages in your blog

Adding the sitemap to Blogger

Make sure you Backup Your Template First ! [How to Backup Blogger Template]
1. Go to Blogger > Pages > Create New Page, Add Title "Sitemap"
2. Click HTML section [where is HTML section in Blogger Post]
3. Now find </div>
4. Now Copy the following code and paste it above </div>
<script src="" type="text/javascript"></script>
<script src=""></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; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and undefinedmax-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; } }
<br />
<div style="bottom: 2%; left: 2%; position: fixed;">
<div class="shareEgg" id="shareThisShareEgg">
<a href="">Blogger Tricks</a>
<br />
<div style="text-align: right;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: xx-small;"><a href="" target="_blank"><span id="goog_1627905543"></span><span id="goog_1627905544"></span></a></span></div>
<div style="text-align: right;">
<br /></div>

After adding the code replace with your site URL and go to Options at right sidebar, select Reader Comments - Don't Allow. Click Publish.

That's it ! now check your blog's sitemap by page link and make sure you have added specific blogger labels [because the sitemap shows labels]

Don't forget to add our Blogger Badge to your Blog/Site and If you like this post kindly share it with others


  1. nice post,click here

    1. Thanks mate, You can Subscribe Us for latest TechEThix Articles, Keep Visiting :)

  2. Thanks Rohit,
    By the way would you please guide us How to make Sitemap from google Webmaster tools.

    1. Sure Pishang, I'll add tutorial about it.
      Thanks for your responce.

  3. I tried to add this table of contents. But unfortunately it doesn't show up. Can you please check my sitemap page ( and provide me a solution. It now shows you a virus alert, because I previously used abu farhans table of contents. That's why I'm changing it.

    1. Sebin Thomas, I have edited the above and also analysed your page coding, you had removed the attribution code [] that's why this responsive sitemap didn't work on your blog. kindly keep the attribution and enjoy this responsive sitemap ;-)

      Stay Connected !

    2. Still it's not working for me.

    3. but Its working on my blog, buddy.

  4. Ro,

    I am playing with your sitemap script at my Blogger page at but for whatever reason it shows me your sitemap and not mine ;-) - could you have a quick look, please?

    Other elements are a mess, too - I am just starting to learn programming...



    1. replace with your blog link :)

  5. Rohit

    There are three times Website links mentioned. Which one to replace with own?


Powered by Blogger.