How to Create Responsive, Attractive Sitemap For Blogger


Sitemap Is also Known as Table Of Contents. Sitemap Is Most Important for every blog. Its Highly Recommended to add Sitemap In The blog to show Table Of Contents. If you are Search For Responsive & Attractive Sitemap For Blogger, then here Is End of your Search.

Today I Will be sharing Top 3 Best Responsive, Awesome & good looking Beautiful Sitemap Code For Blogger.  You can easily add Professional Looking Sitemap In your Blogger Blog.

Without any Skills of Programming, you can add responsive sitemap. Yes ! Just Follow the below steps you can Create Responsive & Attractive Sitemap For Blogger.

If you don’t Know What Is Sitemap, So Let’s Know about the Sitemap. And If you Know about the Sitemap, you can skip this Step and Scroll Down to Add Responsive & Attractive Sitemap For Blogger.

What Is Sitemap.?

As I Mentioned above Sitemap Is also Known as Table Of Contents. Means It show the all Pages & Posts Of your Blog to easy to Understand by Blog Reader and also for Web Crawler. Sitemap Is the Page which Give Clear Navigation Of your Blog to your Visitors. You Can Know More about Sitemap Of Wikipedia Page and Create your Sitemap Online with Sitemap Generator.

Top 3 Responsive & Attractive Sitemap For Blogger

Below Is Best and Top 3 Blogger Sitemap Widget Codes. These all are best and Good Looking you can Choose One Of them and Use On Your Blog With Simple Steps Below.

  • Most Attractive Sitemap Widget for Blogspot
  • Responsive Sitemap Widget for Blogspot
  • Sitemap with Thumbnail for Blogspot

So, First Of all you Need to Know How To Create Sitemap Page In Blogger. Follow the below Steps and create a sitemap Page.

How to Create Sitemap Page For Blogger.?

Below Is Some Simple Steps to follow of them you can easily create a Sitemap Page In Blogger.

Step 1. First Of all, Go To your Blogger Dashboard.

Step 2. Now Click On Pages and Create New Page.

Step 3. In the Editor Screen you need to Change tab from Compose to HTML as Shown In Below Picture.

Step 4. Now Paste here your Sitemap Code Which Is Below In this Article ( In the Best 3 Attractive Sitemap For Blogger, you can Choose One )

Step 5. Give the Page Title Name “Sitemap” and Publish the Page.

Congratulation, You have Successfully added your Responsive & Attractive Sitemap For Blogger Blog.

Code Of Responsive & Attractive Sitemap For Blogger

1.Most Attractive Sitemap Widget for Blogspot


This Is Awesome Sitemap as comparison to the other two sitemaps, On My another Own Blog BloggingMesh, I’m using this Sitemap.

Copy Below Code To apply this Sitemap On your Blog.

<style type="text/css">
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
.labl a{
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
.postname li{
border-bottom: #ddd 1px dotted;

<br />
<div id="toc">
<script src="" type="text/javascript"></script>
<script src=";alt=json-in-script&amp;callback=loadtoc">

2. Responsive Sitemap Widget for Blogspot

<script src="" type='text/javascript'></script>
<script src=";alt=json-in-script&amp;callback=loadtoc"></script>
<p style="display:none;"><a href="">Tricks, Tips & Tutorial</a></p>
<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 (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; } }

3. Sitemap with Thumbnail for Blogspot

<script src=''>
<script style='text/javascript'>
var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
<script src=";alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>
<p style="display:none;"><a href="">All Tip & Tricks</a></p>
<style type="text/css">
.sitemap-container {width: 100%; height: 105px; border-top: 2px solid #eee;}
.sitemap-container:hover {background-color:#fafafa;}
.thumbnail {width: 60px; height: 90px; float: left; top:0px;}
.posttitle {height: 90px; float: left; line-height: 90px; margin-left:25px; display:block; width:80%; white-space:nowrap;}
#postimg {margin-top: 10px;  -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 60px; border: 2px solid #eee;}
#list{list-style-type: none; padding-left: 0px; margin-left: 0px;}

Important Note : Don’t Forget to Replace YOUR SITE name with your Blog Name.

So that Is Code Of all three Responsive & Attractive Sitemap For Blogger. If you have any problem and Facing Issue while Installing the Code, then feel free to ask me In Comment Section Below. And Don’t Forget to share this article on social networking sites with your Friends.


Please enter your comment!
Please enter your name here