How to List the Post Titles of all POSTS from your Blogger/Blogspot Blog [Tutorial]

In this Tutorial, we will show you how to list the Titles of your blog's more than 500 recent posts. If you are looking for an alternative to Blogger's gadget, then this might be very useful to you.

As we experienced, to retrieve the posts of a blog, you can use the URL like this:

http://***.blogspot.com/feeds/posts/default?alt=json&callback=mycallbackfunc&start-index=1&max-results=100

However, it does not work if your blog has more than 500 posts and you want to list them all. Our experiment showed that even you supplied a big number like (e.g.-10000) for max results, only up to 500 posts would return. To retrieve the list of more than 500 posts, we need a loop to do that. The following is how we implemented it for our several blogs.

We can also label all posts in a single page in another way, i.e. SITEMAP/Table Of Contents shows post titles with separated labels and a New! text with recently published posts.
Go through this link How to create a Sitemap/Table of Contents in Blogger to create a page of All Posts Titles for your information/use.
Click here >> SITEMAP to see our Sitemap / Table Of Contents.

Now lets come to the point,

Code goes here :-

<div><ul id="postList12"></ul></div>
<script type="text/javascript">
var startIndex = 1;
var maxResults = 100;
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
a1E.href = url;
a1E.textContent = title;
liE.appendChild(a1E);
elmt.appendChild(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
}
}
}
sendQuery12();
</script>

Now you can put above code in two different ways anywhere in your blogger/blogspot blog. We would recommend to put the code in sidebars - left/right, that's the first way and you can put code in a html page which we can used it as a Sitemap of a blog or Archive or List of All post in a Single page.

DEMO

Lets see how we can insert above given code in blogger/blogspot blog.

First Method: Putting the List in a Gadget

Inserting code in sidebars - left right, of a Blog.

Step:1. Go to Dashboard>>Layout

Step:2. Select add a Gadget Link

Step:3. Select HTML/Javascript gadget

Step:4. Enter the Title of your Widget, e.g. All Posts List

Step:5. Copy above code and paste the code inside the content box

Step:6. Now save and view your blog.

Second Method: Putting the List in a Page

Inserting code in a Page.

Step:1. Go to Dashboard>>Layout

Step:2. Select Page

Step:3. To create page click on New Page button

Step:4. Click Edit HTML tab to switch to HTML mode

Step:5. Copy and paste the code into the Editor

Step:6. Now publish and view your post. The list should appear inside the page.

We hope this Tutorial helps you to align list of all posts in sidebars and in a page as a content of table/sitemap. If you think this helped, subscribe us.

Enjoy !