Create A Simple Sitemap Page for Blogger Powered Blogs

Sitemap helps Search Engines to index your blog pages more effectively by discovering all the pages of your blog. In Blogger platform you can use your ATOM or RSS feed to submit sitemap to search engines like Google and Bing. There are still some other ways to build a sitemap page for your blog. But i am here talking about building a sitemap page than would be readable for both Man and Machine. Here is a simple script that will help you to create a Sitemap page by listing all the posts and pages at there automatically. Follow these simple steps to create a sitemap page for you blogger powered blog.

We are using a simple JSON Script and blogger default Posts feed function. Just follow this two steps tutorial.

STEP 1: Copy and paste the following code into  your Template just before closing Head tags </head>.

<script>
2
var numposts = 10;
3
var showpostdate = false;
4
var showpostsummary = false;
5
var numchars = 100;
6
</script>
7
<script>
8
function rp(json) {
9
document.write('<ul>');
10
for (var i = 0; i < numposts; i++) {
11
document.write('<li>');
12
var entry = json.feed.entry[i];
13
var posttitle = entry.title.$t;
14
var posturl;
15
if (i == json.feed.entry.length) break;
16
for (var k = 0; k < entry.link.length; k++) {
17
if (entry.link[k].rel == 'alternate') {
18
posturl = entry.link[k].href;
19
break;
20
}
21
}
22
posttitle = posttitle.link(posturl);
23
var readmorelink = "(more)";
24
readmorelink = readmorelink.link(posturl);
25
var postdate = entry.published.$t;
26
var cdyear = postdate.substring(0,4);
27
var cdmonth = postdate.substring(5,7);
28
var cdday = postdate.substring(8,10);
29
var monthnames = new Array();
30
monthnames[1] = "Jan";
31
monthnames[2] = "Feb";
32
monthnames[3] = "Mar";
33
monthnames[4] = "Apr";
34
monthnames[5] = "May";
35
monthnames[6] = "Jun";
36
monthnames[7] = "Jul";
37
monthnames[8] = "Aug";
38
monthnames[9] = "Sep";
39
monthnames[10] = "Oct";
40
monthnames[11] = "Nov";
41
monthnames[12] = "Dec";
42
if ("content" in entry) {
43
var postcontent = entry.content.$t;
44
} else if ("summary" in entry) {
45
var postcontent = entry.summary.$t;
46
} else
47
var postcontent = "";
48
var re = /<\S[^>]*>/g;
49
postcontent = postcontent.replace(re, "");
50
document.write(posttitle);
51
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
52
if (showpostsummary == true) {
53
if (postcontent.length < numchars) {
54
document.write(postcontent);
55
} else {
56
postcontent = postcontent.substring(0, numchars);
57
var quoteEnd = postcontent.lastIndexOf(" ");
58
postcontent = postcontent.substring(0,quoteEnd);
59
document.write(postcontent + '...' + readmorelink);
60
}
61
}
62
document.write('</li>');
63
}
64
document.write('</ul>');
65
}
66
</script>

STEP 2: Now create a new Page in blogger and name it as “sitemap” then  copy following code snippet and paste in Edit HTML Mode.

<script src="http://YOUR-BLOG.BLOGSPOT.COM/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

Now it will show a list of all posts according to publishing months. In STEP 2 change the Blog URL with your BLOG URL [Red Colored]. In STEP 1 we are limiting this script to show only 50 posts you can reduce or increase this limit as per your choice. just change the numeric value [green colored] as shown in following piece of code.

var numposts = 50;

You can also show post publishing date along with posts summary if you want, just change ‘false’ with ‘true’ in following code of lines. You can increase of reduce the number of characters for post summery [if enabled] by changing value of numchars=100.

var showpostdate = false;
var showpostsummary = false;
var numchars = 100;

Note: If your blog age is less than 1 month then this will show a simple list of posts.