Sunday, February 17, 2013

Make a Sitemap Page in Blogger

This is about how to make sitemap page in blogger to show all posts you've published. This sitemap will update automatically each time you create a new post.

To make it work it is not necessary to edit the Blogger template code, just follow these steps:

  1. Create a new page (not a new post).
  2. Click on the HTML tab.
  3. Copy the following code inside:
<script>
var numposts = 1000;
var showpostdate = true;
var showpostsummary = false;
var numchars = 200;
</script>
<script>
function rp(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true) document.write(' ' + cdyear + ' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
</script>  

<script src="http://www.yourwebsitenamehere.com/atom.xml?redirect=false&start-index=1&max-results=1000&orderby=published&alt=json-in-script&callback=rp"></script>




Don't forget to put your web site name where I've marked it in red.
When you publish it you will see the sitemap (you can check mine).
The trick to show all published post is in these two parameters:
  • var numposts = 1000;
  • max-results=1000
If you have got more than 1000 posts just change this number to your convenience.
If you don't want to show the date beside the post title then change the line:
var showpostdate = false;

The good thing about it is that you do no need to install a widget or modify the code in your template and for some the Blog archive widget is not convenient because you've got to click on every month to see all the post listed inside.
Now you have a list with all the posts from your website in one single page.

April 2013 Update:

New version with all blog posts separated by month and year

You may like this new version better, it organizes posts by blocks of month and year, then the day number is before the post title, just take a look at my sitemap for blogger , here is the code:

<script>
var numposts = 10000;
var showpostdate = true;
var showpostsummary = false;
var numchars = 200;
var lastDate ="";
</script>
<script>
function rp(json) {
document.write('<ul style=list-style-type:none;>');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);

var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<S[^>]*>/g;
postcontent = postcontent.replace(re, "");


if (lastDate!=cdyear + monthnames[parseInt(cdmonth,10)])
{
    document.write('<li><h4>' + monthnames[parseInt(cdmonth,10)] + ' ' +cdyear +'</h4></li>');
    lastDate=cdyear + monthnames[parseInt(cdmonth,10)]
}
document.write('<li> ' + cdday +' ');
document.write(posttitle);

if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
</script> 

<script src="http://
www.yourwebsitenamehere.com/atom.xml?redirect=false&start-index=1&max-results=50000&orderby=published&alt=json-in-script&callback=rp"></script>

35 comments:

your joke said...

this article help me, i use this for make sitemap page on my blog. Thanks for good article

storiesofmaria said...

I'm glad it helped you! You know there are tutorials about this but it does not show all your articles. BTW, your sitemap looks great!

harry widhiarto said...

nice post....

Maria M. Olivares said...

Thank you, and the most important is that it works! It shows all your posts in the sitemap.

adil khan said...

thanks for this articel check my sitemap which i got from your artical http://fullytop10games.blogspot.com/

Maria M. Olivares said...

Thanks for your comment, I've seen it on your site it's just great :)
I was thinking of separating posts by Year-month blocks on the sitemap, you will see changes here when I do it.

Anonymous said...

Oh Thank God!!!!
Been looking for this code for hours...
Thank you sooooo much..
Its working FANTASTIC!!!

Maria M. Olivares said...

Good! It's nicer with month and year block, just check the second version of the code

kosal poeun said...

Nice post!I like it.Now it works on my blog.
http://khmerbloggertip.blogspot.com

Maria M. Olivares said...

Ok, I'm glad, but I see it is not working in your blog, any problems?
You've got to copy the whole script, but change the url to your onw before you paste in

Crystalflower said...

Thanks. I applied each step but it doesn't work with me. Please check:
http://www.millionmag.com/p/blog-page_9645.html

Maria M. Olivares said...

Hi Crystalflower:
I see what it's wrong with your sitemap: your code has a bad format
so please, try again:
copy the script and paste it into notepad and change to your own url there (do not make changes inside blogger page)
then open the blogger page, click on the HTML tag and paste it.
Save it and see

vgopal said...

Nice post it works on my site, for those who have problem make sure that you have placed your blog URL (Red colored area) and remove the default piece of codes on the page. You can check my sitemap here--> http://www.findmesimilar.com/p/sitemap.html

Maria M. Olivares said...

It looks fantastic on your site! :)

Parisa said...

Thank you for this post, I have tried few other codes but none of them worked in my blog. Till today that I used the one you shared here. many thanks

Maria M. Olivares said...

I'm glad it helped you! If you like it, link to my site :)

adminammad said...

Thanks man It really help me but the numbers are in not format check my site map here http://crushitnow.blogspot.com/p/blog-page.html

Maria M. Olivares said...

You're welcome.. I am a woman :), BTW I see no problem with numbers format ?

Omar Manalansan said...

Great post! Been looking for this. BTW, Can I ask how to make the months full name ex. from
Dec 2013 ---> December 2013

And I just wanna asks how to add a space after the month name just like your sitemap. Thank you so much for this great post.You can check my sitemap here. http://www.barangayginebra.com/p/sitemap.html

Maria M. Olivares said...

Hi Omar,
It just looks great on your site. To have month full name in your site map just look for this block of code:

var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";

and write full names on it, instead:
monthnames[1] = "Jan";
just write: monthnames[1] = "January";

:)

Omar Manalansan said...

Thank you so much for your quick response Ma'am, and may I know how to create a one line space like this:

July 2013

01 Post Title
02 Post Title

June 2013

05 Post Title
06 Post Title

I'm sorry Ma'am i'm a total dummy in coding.and thank you so much. :)

Maria M. Olivares said...

Hi Omar,
Well, for that one you don't really need code. As you can see the month name is inside an H4 tag, so just create a css rule with margin-top and margin-bottom with as many pixels as you like.

Omar Manalansan said...

Thanks for your kind response Ma'am.really appreciate it :D

Norkhatilah Maricar said...

I have been looking all over the internet and all the codes that I had pasted onto my html page just does not work. The codes you provided finally did it!! Thanks so much!!

Maria M. Olivares said...

You're welcome, share it with others if you like it :)

Mishal Ch said...

Great Post Maria :) thanks

kaykrizz said...

It was a success!!! I have been trying to figure this out for so long! thank you thank you so much for this post!

greenhorn scribbleson said...

thank you for the post madam,
i have followed the process but i am only half successful
the title sitemap is showing but the posts are not showing
plz check my blog and tell me where i went wrong

greenhorn scribbleson said...

hi madam, this is me again. i finally got the glitch corrected, earlier i didnt change the dont show option in the page tab, now i changed it, thank you for this helpful post, plz ignore my earlier post, i would appreciate it you plz take a look at my blog anyways as it is because of you that i created the sitemap, thank you madam

Maria M. Olivares said...

You're welcome. I'm happy you made it work and your blog looks great, keep on writing interesting articles. :)

Live to Life said...

can make it sort alphabetic ?

Maria M. Olivares said...

Hi, I've tried with orderby=title, this seems logic to me, but it didn't work :( I'll write the answer here if I find it

John das said...

Hi, I saw your post now and it is great. I am newbie and I customize my blog with the help of tutorials like yours.In my blog, I have got a Webaddress Page as a Tab in which all the posts snippets are redirected and could be seen in one place by the viewer. What your have suggested is a regular Page.I could not understand the difference in purpose. Would you plz clarify

AZ DIY Guy said...

Thank you! It was a little tricky but I got it working.

I had been running a script I had found elsewhere for a while, but it was hosted off site. Every 20-30 clicks or so times, I'd go somewhere unexpected, I thought it was a glitch. This morning, I got a big warning from Google, blocking me from following my own site link.

"Content from abu-farhan.com, a known malware distributor, has been inserted into this web page. Visiting this page now is very likely to infect your computer with malware."

So, what you've provided is excellent! Actual code I can host on my own page! Thanks again!

John
www.azdiyguy.com

Maria M. Olivares said...

Great! Just share it if you've liked it :)

Post a Comment

Your opinion is very appreciated, thank you!