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
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&alt=json-in-script&callback=recent&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
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&alt=json-in-script&callback=loadtoc">
47: </script></div>
Share this post if it helped you.
ConversionConversion EmoticonEmoticon