Simple Recent Posts Widget for Blogger/Blogspot

The main advantage on this Recent Posts widget is that it will show not only post titles, but also post excerpts or snippets, and it's easy to customize or apply different style on it. To make it fit your own design, you will need to modify the CSS style - you can change the link or background color, the size and color of text/links.

What you can do with this widget:
- display post titles only
- change the number of posts
- change the number of characters of the post snippet/excerpt
- show the post dates

See the screenshot below:

How to add Recent Posts Widget to Blogger

Step 1. Log in to your Blogger Dashboard > go to "Layout" and click the "Add a Gadget" link


Step 2. From the pop-up window, scroll down and choose HTML/JavaScript


Step 3. Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript:

Option 1: Recent Posts Widget with Snippets

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://blog-address.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html" rel="nofollow" >Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Option 2: Recent Posts Widget Showing Post Titles Only

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.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://blog-address.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html" rel="nofollow" >Recent Posts Widget</a>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>
Step 4. Customize it:
- Change 5 (option 1) and 10 (option 2) with the number of posts that you want to display.
- Change false to true if you want the posts dates to appear
- Change 100 (option 1) if you want more characters to be displayed.
- To change the color and font size of the links, modify the values in blue (links) and violet (font-size)
- To change the style of posts summary, modify the values in green (color) and orange (font size)
- Replace the http://blog-address.com text with your URL

Step 5. Save your widget. And that's it! Enjoy!
Share this post:

    Random Posts

109 comments:

  1. good!
    http://soft375.blogspot.com/ for latest software downloads

    ReplyDelete
  2. Thanks for the beautify tutorials.

    ReplyDelete
  3. Okay everything works! One Question thought, what can i change to open the links in a new window (target _blank)? or is that on your script

    ReplyDelete
    Replies
    1. Anonymous4/03/2013

      This would be very helpful, as frame is too small to support full blog page. Please, please please...can the author respond to this?

      Delete
  4. Anonymous7/22/2012

    how to change to font color?

    ReplyDelete
    Replies
    1. Hi,

      Just after <style type="text/css"> add the following line:
      For the 1st option:
      #hlrpsa a {color: #yourcolorcodehere;}
      For the 2nd option:
      #hlrpsb a {color: #yourcolorcodehere; }

      Replace #yourcolorcodehere with the hex code of your color (be careful to not delete the ; and } symbols)

      Delete
    2. Anonymous8/27/2012

      thank you very much this is a great help for me.

      Delete
  5. Anonymous7/25/2012

    Adjustments to the font color and a larger font for the title would be incredible.

    ReplyDelete
    Replies
    1. For the font size add the following lines just after <style type="text/css">
      For the 1st option:
      #hlrpsa a {font-size: 15px;}
      For the 2nd option:
      #hlrpsb a {font-size: 15px; }

      Increase/decrease the 15px value for changing the font size ;)

      Delete
  6. Please tell me!!.How can I change the number of posts more than 25 posts?

    ReplyDelete
  7. Thank very much!;)

    ReplyDelete
  8. Thanks for this however, i also wanted to add the thumnails too.:)

    ReplyDelete
  9. Anonymous9/16/2012

    Its was Good. Can i know how to make This by Showing video as recent post As If blog is About The Video.Widgets showing video with Title..

    ReplyDelete
  10. Thank you very much!

    ReplyDelete
  11. wow great, it was so easy following these steps!

    ReplyDelete
  12. Anonymous9/19/2012

    Thanks so much! For some reason it's only showing 25 post titles as it seems this is the max. Is there a way to increase this? Thanks

    ReplyDelete
  13. Anonymous11/17/2012

    nice !
    http://www.warezbi.com

    ReplyDelete
  14. how to add rss image aur any symbol in starting of titles..

    ReplyDelete
  15. oh my God, you this tutorial too, I've been looking on google! Thanks again!

    ReplyDelete
  16. Thank you so much!! I have learnt a lot from you.You guys are very supportive for newbie's like us.

    ReplyDelete
  17. Thank you so much for the widget. The featured 'recent Posts' widget on blogger keeps breaking down and takes a big bite out of my pageviews when it does. This one is wonderful. Thank you.

    ReplyDelete
  18. how to show thumbnail image??

    ReplyDelete
  19. how can i add recently post with image.

    ReplyDelete
  20. it didnt work with my blog :(

    ReplyDelete
  21. Anonymous12/30/2012

    this is pretty helpful, thanks

    ReplyDelete
  22. Hy friend.. could i able to add images with the recent posts ..??

    ReplyDelete
  23. Does it work with Squarespace?

    I have tried it and it didn't work. Do you have any other alternative?

    ReplyDelete
  24. so helpful... thank you very much

    ReplyDelete
  25. This works wonderfully! Anyway to add an image?

    ReplyDelete
  26. i was developing a new widget and was searching for this script...that's man....

    ReplyDelete
  27. Awesome. this is what i am looking for

    ReplyDelete
  28. Hi, the code has an error:

    if (!standardstyling) document.write('/div');

    Should be the following?

    if (!standardstyling) document.write('</div>');

    Thank for this widget!

    ReplyDelete
  29. Nice and simple widget, worked fine im my website.
    Thanks for sharing

    ReplyDelete
  30. how to configure widget height

    ReplyDelete
  31. Nice info.. thanks..
    visit back.

    ReplyDelete
  32. I use your code..
    i like your code..
    i use in this blog http://freehdtvlive.blogspot.com

    ReplyDelete
  33. Thank you so much for your blogging help. Your site is so much better than blogger help and your tutorials are so easy to follow.

    Shirley

    ReplyDelete
  34. Thank you so much! I have been looking forward it for days!

    ReplyDelete
    Replies
    1. You're welcome. Thanks for stopping by :)

      Delete
  35. Thanks for the help. It has appeared on my blog displaying the month and day posted but not the year. Did I miss something?

    ReplyDelete
    Replies
    1. Fixed. It was missing inside the JavaScript file, now I added that code part and it works. Please check your blog. Thanks for visiting!

      Delete
    2. Thank you, its fine now.

      Delete
  36. My blog is now displaying only 25 posts where actually am having more than 50 posts. Could you please help me out to show/display all the posts in the Dynamic Sidebar of my blog?
    http://bankapure.blogspot.com
    bankapure@gmail.com

    ReplyDelete
  37. Thank you so much for this. Is there a way of showing a feed for a particular label/tag?

    ReplyDelete
  38. Works also fine as widget on my homepage (http://www.kueting.de) with blog source (http://blog.kueting.de)!

    Nice work! :)

    ReplyDelete
  39. Wow! Works like a charm! Thank you!!
    www.tilliesdream.com

    ReplyDelete
  40. thanks for this great tutorial! i used it in my blog epicfeedtime.com

    ReplyDelete
  41. Would it be possible to make the images the link to the post as well?

    ReplyDelete
  42. Thank You...It's working.......

    ReplyDelete
  43. Thanks a million, I implemented it on my blog
    www.baba2023.com

    ReplyDelete
  44. 2 things --

    1) Thanks! This script is awesome. I appreciate the time you've spent building and fine-tuning it.
    2) I've actually made this a page on my website. Unfortunately, it only lists the most recent 25. Is there a way to tweak it to show the last, say, 200?

    Thanks again!

    ReplyDelete
  45. Thank you so very much. I am a reader of your site and love all of your tricks and tips

    ReplyDelete
  46. Thanks a lot. I used the option1 modified version and it's looking beautiful.
    This is becoming my fav blogger widget blog :)

    http://pravab.blogspot.com/

    ReplyDelete
  47. P.S> why are the new comments in teh bottom and the old ones on the top?

    ReplyDelete
  48. how to implement marquee ?

    ReplyDelete
  49. hi
    can u help and suggest me only loables based blogger templates

    than u so much

    ReplyDelete
  50. Thankful. It works as advertised. Lot bettr than the default list widget.

    ReplyDelete
  51. nice..work for me,thank a lot

    ReplyDelete
  52. thank yoy plend,, nice to meet your blog,, flwback eahh,, :)

    ReplyDelete

  53. This is an amazing list of information.thanks for sharing

    ReplyDelete
  54. thank for sharing...it great

    ReplyDelete
  55. thanks... i like that tutorial..

    ReplyDelete
  56. Thank you for sharing this! Exactly what I was looking for.

    ReplyDelete
  57. Well, that was easy peasy! Thank you!

    ReplyDelete
  58. Well, that was easy peasy...thank you!

    ReplyDelete
  59. Please help. I have tried this widget in my blog & it shows a tab of Recent Posts at right side in my blog, but it's not displaying any titles in there which I have posted recently. What's going wrong? Please help...

    ReplyDelete
  60. Ohh.. Thank You, It works nicely. Actually I have messed something, now it's perfect.

    ReplyDelete
  61. can you give me code of related posts !
    thank you !

    ReplyDelete
  62. Thanks..Its simple and easy to apply..

    ReplyDelete
  63. Thanks! Can you make the title and post snippet different font size and color? Also, how to put a line break in between the title and snippet?

    ReplyDelete
  64. Thanks for this Widget, it works great on my Blog!

    ReplyDelete
  65. not working on my blog :(

    ReplyDelete
    Replies
    1. Hi,

      Please make sure that you replace http://your-blog.blogspot.com with your blog address and that it doesn't have more than a trailing slash at the end.

      Delete
  66. Thanks , nice blog
    http://makeitsimple.co.in/

    ReplyDelete
  67. Just what I'm looking for. Thanks.

    ReplyDelete
  68. I'm using option 1 and would like to know how to add thumbnails (80x80px). Thanks!

    ReplyDelete
  69. HOW TO RESIZE THE TITLE(RECENT POSTS)?

    ReplyDelete
  70. Yes, i have to try this.
    and it's work to have an wiged popular post in my blog..
    thanks a lot..

    ReplyDelete
  71. Hello, thank you. After the inbuilt 'Recent Comments' and 'Recent 'Posts' widgets in Blogger went kaput, I'd been looking for a simpler widget. Yours worked beautifully. Thank you so much again. You may wish to view my blog at mobilephoneus.blogspot.in and check it out if you are interested.

    ReplyDelete
  72. Nice! Thanks you very much! ;)

    ReplyDelete
  73. can someone give me a link to read up on what coding is compatible with blogger, and its posts.

    ReplyDelete
  74. Thank you. What code would I need to a "visited color" or a "hover color?"

    ReplyDelete
    Replies
    1. Hi Johnny,

      You need to add the following snippets just before the </style> tag:
      #hlrpsb a:visited {color: #000000; }
      #hlrpsb a:hover {color: #0000ff; }

      And then, replace the color values.

      Delete
  75. Thanks for great tutorial :)
    it's really helpful and easy to understand!

    ReplyDelete
  76. Any way to make this widget to show more then 25 recent posts? It can be really helpfull to me if you have any idea. Thanks!

    ReplyDelete
  77. Hi,
    Great code,
    please can you post an update that removes the limit of 25 posts and how to add a thumbnail,
    thanks
    J

    ReplyDelete
  78. Anonymous6/07/2014

    thanks!
    keep it up!

    ReplyDelete
  79. Thanks for sharing. I saw a lot of success comments above.
    But it does not work on my blog.
    I tried to add codes into HTML mode for a static page.
    Please help.

    ReplyDelete
  80. its not working on my website i.e www.resultidea.in

    ReplyDelete
  81. Hi, this is cool, I tried the Related Post widget but it didn't work. What can I do please? This is my blog, get more amazing things there http://www.entertain9jar.blogspot.com (Entertain9jar) Thanks.

    ReplyDelete
  82. good job man ! i like it, thanks very much

    ReplyDelete
  83. It works and looks great, I couldn't possibly ask for more. Once again, thank you for making everything involving code seem so easy.

    ReplyDelete
  84. Hi i have added the widget and customized it to include photos, Does any one know how i can auto resize the images? Thanks, your help will be appreciated

    ReplyDelete
  85. thanks so much, so help me. oh ya, maybe you can make a new widget show article per label like this widget next day. :)

    ReplyDelete

Although every comment is appreciated, due to time limitations I might not be able to respond to everyone. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!