In this tutorial, we are going to make a page that will automatically lists all your Blogger posts. It will also updates itself when you created a new post. This widget will act like a sitemap for your visitors wherein they can easily scroll down all your posts from the oldest one up to the newest.

Another blog who posted the same tutorial stated that the code will not work if your blog posts are already beyond 500. But I tested the code on my blog with over thousand of posts and it worked. Same goes here on the sharingthat.xyz blog, the widget is perfectly working. You can see a live example of this tutorial here. You can also see the image below.


Don't be confused why I labeled the page as Sitemap, because, for me the widget really looks like a sitemap wherein it summarizes all the contents of your blog, though there is no hierarchy from the homepage up to the subpages. Well, you can label the widget to any name that you wanted.

Okay! Let's start the tutorial.

STEPS:

1. Because this is going to be static page or a page that you will never modify again and it updates itself, we will be using a new Page and not a new Post for this widget.

2. Go to your Blogger > Pages > New Page.


3. Inside the page editor, you need to name your page first. Its up to you whatever name or title that you want, you can put "Sitemap", "All Blog Content", whatever.

4. Now, from Compose, switch to HTML.


5. In the HTML editor of your page, copy and paste the given code below.
<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>

6. When done, save your page and publish it.


7. Immediately test your new Blogger widget that automatically lists of your blogger posts by going to Pages > and clicking the "View" link of that page.

CUSTOMIZE THE LOOK OF THE WIDGET.

1. The widget that I have has the check icon as the main separator of the list of all posts. You will notice that you will not have the same as mine. You need to edit your template HTML code to be able to modify yours. Just search for the unordered list or ul tag inside your html editor.

2. To change the font face of your post title list, just add <font face="NAME OF THE FONT YOU WANT"> before the <div><ul id="postList12"></ul></div> and close it with the closing font tag like this </font>. The closing font tag is below the closing </script> tag.

If you have something to share or ask regarding this tutoria, please leave your comment below. Thank you!