Create a Responsive blogger Sitemap ~ Andercorp Tech

Hello, It's been quite a while since i wrote an article, i was busy with stuffs.
So today if you are interested in making your blog look more professional, you'll need a Sitemap and most importantly, if you intend making money on your blog, then a Sitemap is very important because that's one of the requirement Google want to see on your blog before they even think of approving your AdSense account.

So below, i will give you the code for two awesomely responsive Sitemap.
Installation is pretty easy, Login to your blog, create a new page called site map and switch to HTML and then paste the code and publish.
If you have a Sitemap already, all you have to do is to replace the code with the one you copied here and you are done.

This first Sitemap is attractive, i comes with post thumbnails, and remember to change www.YOURSITE.com to your blog URL

LIVE DEMO

1:  <script src='https://bloggertipstricks.googlecode.com/files/bloggertipstricks.com-sitemap.js'>  
2:  </script>  
3:  <script style='text/javascript'>  
4:  var numposts = 999;  
5:  var showpostthumbnails = true;  
6:  var displayseparator = true;  
7:  </script>  
8:  <script src="http://www.YOURSITE.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>  
9:  <p style="display:none;"><a href="http://www.tricksgalaxy.com/">All Tip & Tricks</a></p>  
10:  <style type="text/css">  
11:  .sitemap-container {width: 100%; height: 105px; border-top: 2px solid #eee;}  
12:  .sitemap-container:hover {background-color:#fafafa;}  
13:  .thumbnail {width: 60px; height: 90px; float: left; top:0px;}  
14:  .posttitle {height: 90px; float: left; line-height: 90px; margin-left:25px; display:block; width:80%; white-space:nowrap;}  
15:  #postimg {margin-top: 10px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 60px; border: 2px solid #eee;}  
16:  #list{list-style-type: none; padding-left: 0px; margin-left: 0px;}  
17:  </style>

Now this second Sitemap does not have thumbnail, but it's also super awesome and also my favorite

LIVE DEMO

1:  <style type="text/css">  
2:  #toc{  
3:  width:99%;  
4:  margin:5px auto;  
5:  border:1px solid #2D96DF;  
6:  -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);  
7:  -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);  
8:  box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);  
9:  }  
10:  .labl{  
11:  color:#FF5F00;  
12:  font-weight:bold;  
13:  margin:0 -5px;  
14:  padding:1px 0 2px 11px;  
15:  background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);  
16:  background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));  
17:  border:1px solid #2D96DF;  
18:  border-radius:4px;-moz-border-radius:4px;  
19:  -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;  
20:  -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;  
21:  }  
22:  .labl a{  
23:  color:#fff;  
24:  }  
25:  .labl:first-letter{t  
26:  ext-transform:uppercase;  
27:  }  
28:  .new{  
29:  color:#FF5F00;  
30:  font-weight:bold;  
31:  font-style:italic;  
32:  }  
33:  .postname{  
34:  font-weight:normal;  
35:  background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);  
36:  background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));  
37:  }  
38:  .postname li{  
39:  border-bottom: #ddd 1px dotted;  
40:  margin-right:5px  
41:  }  
42:  </style>  
43:  <br />  
44:  <div id="toc">  
45:  <script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>  
46:  <script src="http://www.YOURSITE.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">  
47:  </script></div>

Share this post if it helped you.