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>

Comments

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

    ReplyDelete
  2. 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!

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

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

    ReplyDelete
  5. 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.

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

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

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

    ReplyDelete
  9. 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

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

    ReplyDelete
  11. 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

    ReplyDelete
  12. 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

    ReplyDelete
  13. It looks fantastic on your site! :)

    ReplyDelete
  14. 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

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

    ReplyDelete
  16. 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

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

    ReplyDelete
  18. 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

    ReplyDelete
  19. 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";

    :)

    ReplyDelete
  20. 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. :)

    ReplyDelete
  21. 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.

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

    ReplyDelete
  23. 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!!

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

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

    ReplyDelete
  26. 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

    ReplyDelete
  27. 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

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

    ReplyDelete
  29. 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

    ReplyDelete
  30. 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

    ReplyDelete
  31. 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

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

    ReplyDelete

Post a Comment

Your opinion is very appreciated, thank you!

Popular posts from this blog

Repair Dolce Gusto Circolo Leaking Problem

Root Nook Simple Touch with updated NookManager

How to Change the Gear Shift Knob of the Peugeot 306