How to add list of posts to blogger page

Blogger as we all know a very famous and useful blogging platform. It gives a chance to all to create reputation in internet world. Unlike other platform blogger is more reliable and easy to handle. We can create custom widget/gadgets for blogger by using simple html,css and javascript. Also its api requests is easy to learn. Today i discuss how to add list of posts to a blogger page by using simple javascript.

Add Coding
To do this simply follow these steps:

1. Go to Blogger Dashboard
2. In the pages tab,Click on new page button.

3. Give a name to the page.
Add the following code to it.


<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>

4. Now publish the page and see the magic.

It will produce below results-:

You can make it beautiful by simply implementing css. As you can see in the above code we are using unordered list to format the results in listview. To customize list just apply css to unordered list. Add the css style tag in the starting of code. You can apply different kind of style.

Last Tips-:

Above script is working perfect as we tested. If you get any error feel free to tell us via comments. We are here to help you. Please don't forget to share this post.

Source