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/ apply different style on it. To style it into your own design, you just have 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, then go to Layout and click on 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://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.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;}
#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://your-blog.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://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.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;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Step 4.
  • Change 5 (option 1) and 10 (option 2) with the number of posts 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 your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:
http://www.your-site.com/feeds/posts/default....

Step 5. Save your widget. And that's it! Enjoy!

    Random Posts

156 comments:

  1. Wow! it`s a very easy to apply trick, Thank you sir, Now every one can see my recent post. Do you want to?

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

    ReplyDelete
  3. Thanks for the beautify tutorials.

    ReplyDelete
  4. 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
  5. 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
  6. 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
  7. This is amazing widget, thanks for sharing ...

    ReplyDelete
  8. hi friend, i like your trick, please share how to make recent comment with cirle image in right sidebar. please share it. thanks

    ReplyDelete
  9. how can I do like this;
    http://helplogger.blogspot.com/2012/03/add-multi-colored-popular-posts-to.html

    multi color.

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

    ReplyDelete
  11. Thank very much!;)

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

    ReplyDelete
  13. thanks for the tutorial

    ReplyDelete
  14. Its really very nice post i get help from this post to create recent post widget Thank you so much :)

    ReplyDelete
  15. It's work dude thanks for share such a nice and helping post with mention editing options as per desire you rocks!!! :D

    ReplyDelete
  16. Thank you so much! So easy to follow your instructions! Brilliant!

    ReplyDelete
  17. 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
  18. thank you very much

    ReplyDelete
  19. Thank you very much!

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

    ReplyDelete
  21. 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
  22. I guess this info is totally unique.
    Signfloat Bookmarking

    ReplyDelete
  23. Thanks thanks thanks, i'd like your post, its very help my problem's blog

    ReplyDelete
  24. thanks for this wonderful post :)

    ReplyDelete
  25. Thanks a lot for tutorial, now I have this recent post widget on my blog. Thanks again.

    ReplyDelete
  26. Anonymous11/17/2012

    nice !
    http://www.warezbi.com

    ReplyDelete
  27. thanks bro, it works for me, thaks again for a nice widget
    http://www.filmylinks4u.net/

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

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

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

    ReplyDelete
  31. It's work dude. This Recent Posts Widget For Blogger is what i looking for. Thank you so much

    ReplyDelete
  32. 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
  33. This is just Great ! Thanks a lot for the cods .

    ReplyDelete
  34. nice widget for beginner

    ReplyDelete
  35. how to show thumbnail image??

    ReplyDelete
  36. can you make related post on post area o.o

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

    ReplyDelete
  38. it didnt work with my blog :(

    ReplyDelete
  39. Anonymous12/30/2012

    this is pretty helpful, thanks

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

    ReplyDelete
  41. Does it work with Squarespace?

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

    ReplyDelete
  42. http://www.Saeedbaba.com

    very nice post and nice blog
    really helpful for blogger

    ReplyDelete
  43. How to set width and height of widget?

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

    ReplyDelete
  45. thanks alot for this great share, i truly love this

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

    ReplyDelete
  47. there are 2 options, love it!

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

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

    ReplyDelete
  50. 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
  51. Nice and simple widget, worked fine im my website.
    Thanks for sharing

    ReplyDelete
  52. Please help me. I see it show on home page. I don't want this. I want it only display on detail articles. Thanks
    @ du hoc nhat ban

    ReplyDelete
  53. how to configure widget height

    ReplyDelete
  54. Nice info.. thanks..
    visit back.

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

    ReplyDelete
  56. 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
  57. Thank you so much! I have been looking forward it for days!

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

      Delete
  58. 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
  59. 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
  60. very nice post and nice blog
    really helpful for blogger

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

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

    Nice work! :)

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

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

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

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

    ReplyDelete
  67. thanks for great post

    ReplyDelete
    Replies
    1. Angka apa yg' keluar mlm ini Kwand
      Heheheheheee.........?

      Delete
  68. Thanks a million, I implemented it on my blog
    www.baba2023.com

    ReplyDelete
  69. thanks! this will help me a lot, thanks again dude.

    ReplyDelete
  70. 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
  71. thanks for sharing the script, i'll try it to my blog

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

    ReplyDelete
  73. Hi, Nice Simple Recent Posts Widget for Blogspot .Thanks, its really helped me......

    -Aparna
    Theosoft

    ReplyDelete
  74. Very nice and fine blog. This blog very help me by widgets.

    ReplyDelete
  75. very informative and helping... thank you

    ReplyDelete
  76. 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
  77. P.S> why are the new comments in teh bottom and the old ones on the top?

    ReplyDelete
  78. how to implement marquee ?

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

    than u so much

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

    ReplyDelete
  81. Thanks, how do you change the size of the widget?

    ReplyDelete
  82. Why you make 'recent post' with scroll ?

    ReplyDelete
  83. Thanks for share nice tips...Great

    ReplyDelete
  84. how to change to font color?

    ReplyDelete
  85. thank for the nice tips,, its work

    ReplyDelete
  86. i'll make change for my blog,thank in advance :cheers:

    ReplyDelete
  87. very nice tips,thank for sharing,, thumb up

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

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

    ReplyDelete

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

    ReplyDelete
  91. thanks for showing that

    ReplyDelete
  92. thank for sharing...it great

    ReplyDelete
  93. thanks... i like that tutorial..

    ReplyDelete
  94. Thanks for sharing informative blog about Mlm Templates. It s very nice.

    ReplyDelete
  95. Thank you sharing this post. Could you please share how we can know how many users visit our blog, and which post is the most popular among the users?

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

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

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

    ReplyDelete
  99. 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
  100. Ohh.. Thank You, It works nicely. Actually I have messed something, now it's perfect.

    ReplyDelete
  101. nice post for your info :D

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

    ReplyDelete
  103. Thanks,
    But its not related post widget but a recent post widget.

    ReplyDelete
  104. Thank you very much, because this article very helupful for me ( Newbie Blogger ) if you have time, visit my site :D

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

    ReplyDelete
  106. 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
  107. i like this post, this is my inspiration

    ReplyDelete
  108. How to add < ul > and < li >?

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

    ReplyDelete
  110. 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
  111. Thanks a lot on your article, that was very informative.

    ReplyDelete
  112. That was a very nice widget. :)

    ReplyDelete
  113. Thanks , nice blog
    http://makeitsimple.co.in/

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

    ReplyDelete
  115. Thanks very much bro, for your tips

    ReplyDelete
  116. Recent Posts Widget for Blogger is very important in every blog, thank you very much

    ReplyDelete
  117. Thanks, u solved my problem

    ReplyDelete
  118. Thanks for this one :)

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

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

    ReplyDelete