Gadgets, Tech tips, WordPress and Blogger Tutorials

Recent Posts Widget for Blogger

Tiramisu with Strawberries

Another Recent Posts Widget for Blogger. Unlike the first Recent Posts widget, this new widget for Blogger lets you display more than 5 recent posts on your blog. It will show not only post titles but also post excerpts or snippets.

Click here if you want a Recent Posts widget with thumbnails.

What you can do with this widget:

  • you change the number of posts
  • you can change the number of characters of the post snippet/excerpt, or
  • you can display post titles only
  • show the post dates

See Installation and Optional Settings below.

Screenshot:
Recent Posts Widget

Get Code

Option A: Recent Posts Widget with post snippets

<div id="mtrpwa">
<script style="text/javascript" src="https://sites.google.com/site/projectdigitaltomato/blogger/js/rpost-english.js"></script>
<script style="text/javascript">var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://YourOwnB1og.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://www.madtomatoe.com/recent-posts-widget-2/" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://www.madtomatoe.com" title="Recent Posts Widget">Blogger Widgets</a></div><noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>
#rpdr {background: url(http://3.bp.blogspot.com/-wsIqUGbMUyk/TchLsqCK3QI/AAAAAAAACmU/udeV22bGZ78/s400/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#mtrpwa { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.mtrpw a {font-weight:bold; }
.mtrpwsumm {} 
</style>

Option B: Recent Posts Widget showing post titles only

<div id="mtrpwb">
<script style="text/javascript" src="https://sites.google.com/site/projectdigitaltomato/blogger/js/rpost-english2.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://YourOwnB1og.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://www.madtomatoe.com/recent-posts-widget-2/" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://www.madtomatoe.com" title="Recent Posts Widget">Blogger Widgets</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url(http://3.bp.blogspot.com/-wsIqUGbMUyk/TchLsqCK3QI/AAAAAAAACmU/udeV22bGZ78/s400/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#mtrpwb { }
.bbrecpost2 {
padding-top:6px; 
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

How To Install

1. Go to your Blogger Dashboard > your blog’s Layout > Add a Gadget > HTML/JavaScript
2. Copy and paste the code into the new HTML/JavaScript.
3. In the code, look for the line…

…src=”http://YourOwnB1og.blogspot.com/feeds/posts/default...

…and replace the blog address (shown in color red below) with your own blog address

…src=”http://YourOwnB1og.blogspot.com/feeds/posts/default...

(For custom domains)…

…src="http://www.YourOwnB1og.com/feeds/posts/default...

4. Add a title. Save. That’s it!

Optional Settings

How to change the Number of Posts
To change the number of posts, just look for the number 5 (for Option A) in the code and replace it with the number of posts you want to be displayed. (For Option B, look for the number 10).

Recommend setting for Option A: 5 to 8.
Recommend setting for Option B: 5 to 15.

... var numposts = 5;var...

How to change the Number of Characters (for Option A only)
This widget is set to display an excerpt (snippet) of 100 characters of each post. If you want to change that number, just look for the number 100 in the code and replace it with the number of characters you want to be displayed.

Recommended setting: 50 to 100.

... numchars = 100;var...

How to Show Post Date
If you want to show the post date, look for the line with the word showpostdate in the code. Then change its value from false to true (shown in color red below).

... showpostdate = false;var...

That’s it! Have fun!

Please let me know what you think of this widget by leaving a comment below.

(PHOTO: VancityAllie/flickr)

Get updates delivered straight to your inbox!

Enter your email address:

69 comments

  1. When I attempted to insert the Recent Posts A or the other Post html (because my post box is not showing), my editor kicked it out as not being properly formatted.

    Any thoughts?

    Thanks,

    -Jane

  2. When I attempted to insert the Recent Posts A or the other Recent Posts widget code (because my post box is not showing), my editor kicked it out as not being properly formatted.

    Any thoughts?

    Thanks,

    -Jane

    • You don’t have to edit your template’s html. Just follow the instruction in the post on how to install:

      Just go to your dashboard > your blog’s layout > then add a Gadget (HTML/JavaScript). Then paste the code in the HTML/JavaScript gadget. Don’t forget to add your blog address (step #3).

  3. Very simple and useful. Thanks!

  4. maria /

    Thanks, this was just what I needed

Leave a Reply