Blogger Recent Posts Widget That Lists Posts Titles Without Thumbnails

The Recent Posts widget for Blogger lets you display the most recent blog posts on the sidebar of your Blogger/Blogspot blog, making it easy for your readers to see what’s new on your blog.

There are different Blogger recent posts widgets out there. Some will display posts title and thumbnails; some will display number of comments and date in addition to the posts titles and thumbnails; while some will just display the post titles.

The recent posts widget I’m sharing with you in this tutorial will list your recent posts titles. No thumbnails, no date.

Here’s an example of what it looks like:

recent posts gadget for blogger for content marketing

To add this to your Blogger blog, Sign in blogger.com, go to your blog dashboard and navigate to “Layout”

On the sidebar, click on “Add a gadget” and select “HTML/Javascript” gadget.

Copy the javascript code below and paste it in the “HTML/Javascript” gadget

<script type=”text/javascript”>
function recentpostslist(json) {
 document.write(‘<ol>’);
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == ‘alternate’) {
        break;
      }
    }
var entryUrl = “‘” + json.feed.entry[i].link[j].href + “‘”;//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = “<li>” + “<a href=”+ entryUrl + ‘” target=”_blank”>’ + entryTitle + “</a> </li>”;
 document.write(item);
 }
 document.write(‘</ol>’);
 }
</script>
<script src=”http://www.ogbongeblog.com/feeds/posts/default?max-results=2&alt=json-in-script&callback=recentpostslist”></script>

Carefully replace the blog address with yours and click SAVE.

blogger recent posts widget code javascript

Proceed to view your blog and you should see it displaying the recent posts of your blog.

NB: You can change the number of posts to be displayed as seen in the image above. You can also use css to style the list. eg change font color, size etc

I hope this helps.

3 Comments

Leave a Reply

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy. Your email address is required but will not be published. No keyword stuffing in the name field and commenting from blah blah blah makes no sense. Thank You.

How To Update Opera Browser To Latest Version Manually

Mailchimp Automation Now Free For All Users On Any Of Mailchimp Plans