Recent Posts Widget with Thumbnails for Blogger



Recent Posts Blogger
Today I am going to show you how you can add an amazing and wonderful Recent Posts widget to your blogger blog. This widget fetches the latest posts via JavaScript and show it in a beautiful manner. This widget displays the recent posts with their thumbnails. When hovered we can see CSS transition effect taking place, the box rotates and a box containing the post snippet appears.

This widget is very attractive and eye-catching. It has a custom loading effect too which makes the widget much more awesome. A quick demo of this widget can be seen just below.





Please see the width of the widget will be different in your blog. It is quite big just for demonstration purpose.

To add this widget to your blog just follow the below instructions.

Adding the Widget in Layout


Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv8z1Aqxy4QUfaaJYRbWDxwl2q6dErz58U3UC7jkA1et4u48spaVKh_M2r7-5JAK_FqRHnc3_5DIw-XGGeRAEnCWKmBTELvHcegcEBOoCATryDK3Fakrud6C1Hj-wPACqy9DR1oZQIIux-/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "Recent Posts",       // Widget Title
    numposts    = 14,      // Number of Posts to show
    numchar     = 200,      // Number of Characters to be displayed
    rcFadeSpeed = 600,      // Speed
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image
    blogURL     = "http://www.allbloggertricks.com/";       // Your Blog URL
</script>
<script src="http://files.allbloggertricks.com/Scripts/abt-recent-posts.js" type="text/javascript"></script>

After adding the above code you may change Widget Title, Number of Posts to show and Your Blog URL. After that save the widget and finally save the template.

You are done now. Now you and your visitors can see this awesome Recent Posts widget with Thumbnails in your blogger blog.

[via]

46 comments:

  1. Me gustaria un widgets así pero como "popular Post"
    Un saludo :)

    ReplyDelete
  2. it is not showing all the pics in my blog....

    gaane-shaane.blogspot.com

    ReplyDelete
    Replies
    1. I checked your blog. It is showing. Kindly refresh the page and check again.

      Delete
  3. the thumbnails are not showing up on my site, can u help me out with this?

    ReplyDelete
  4. Hello, I would like to remove the widget title, or add an image instead. Is there a way to do this?

    ReplyDelete
  5. i tried many times but not working...help please.. http://windowgear.blogspot.in/

    ReplyDelete
  6. It worked, I love it! I've changed colours and font :-) Have you done something like that but with popular posts?

    ReplyDelete
    Replies
    1. Not exactly the same but yah a look alike version of Popular Post can be found on this blog.

      Delete
  7. Thanks! This is great!

    ReplyDelete
  8. deu certo mais tem um problema as guias com os titulos e texto que aparece ao passar o mouse das coluna de baixo fica por baixo da pagina do meu blog, como fazer pra elas aparecerem por cima de tudo, por completo? eu alterei o z-index mais ñ adiantou de nada.... vlw um abraço

    ReplyDelete
  9. It is not showing thumbnails in my blog.

    ReplyDelete
  10. It's not working please help..

    ReplyDelete
  11. How do I make it show only specific posts based on labels?

    ReplyDelete
    Replies
    1. For that instead of using your blog's main URL use the label's URL.

      Delete
  12. All perfect! but the images are blurred...

    ReplyDelete
  13. hello can you give me widget like down "You may also like"

    ReplyDelete
  14. sir i want to know that how we can post things in blogger in one window with diffrent tags like in popular,recent,comments,tags
    i am giving you one link = http://muhammadniaz.net/
    like this plz sir mujhe ye bata dijiye iski link mujhe = vaibhavgupta11th@gmail.com

    ReplyDelete
  15. Hi.May I know how to Configure the size of those related thumbnails. Its way too small I guess. Thank You... :)

    ReplyDelete
  16. men the image on my blog are no showing http://www.u-shape.info/

    ReplyDelete
  17. A few the widgets I got from here just suddenly stopped working Google help said that looks like the server is down that I need to contact the person I got the script from. So why I am posting here do you know if there is an issue going on with this script as to why suddenly stopped working? I really liked this and love to have it working again on my blog

    ReplyDelete
  18. Hi, this is probably one of the most unique recent posts widgets I've come across. I am testing it on a new template and for some reason a portion of the text boxes are being cut off on the third row and on the bottom row. Do you have any advice?

    Thank you.

    ReplyDelete
  19. please i have probleme when i inser a script of popular posts or recent i don't see the picture !

    ReplyDelete
  20. Thanks Working Like a Magic Great Widget

    ReplyDelete
  21. why recently nor working again ?

    js file dropbox Error (509)

    https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-posts.js

    ReplyDelete
  22. Your script hosted on dropbox is missing !

    ReplyDelete
  23. The script stop to work!

    ReplyDelete
    Replies
    1. The script has been updated, please copy and paste the new code. Sorry for the issue.

      Delete
  24. Hello! Some days ago I have added your widget in my blog and it worked perfectly. But latter stopped. Today I have deleted an old version and added your code again. But unfortunately it doesn't work.

    Could you please help me as I liked your widget a lot?

    Thank you in advance for your help.

    Daiva
    (furgovanbcn@gmail.com)

    ReplyDelete
  25. This is a really good widget! ;)
    May i know how to modify it, so that it shows posts under a specific Label.
    That would really help me. Thanks! ^^

    ReplyDelete
  26. How to set up the large, the small images?

    ReplyDelete
  27. Widget is so nice.. to my blog.. thank you friend..

    ReplyDelete
  28. Nice Working... Thanks for share this...

    ReplyDelete
  29. In this coding I am not getting the title recent posts. Only getting the thumbnails properly.

    ReplyDelete
  30. Thanks for the simple and great tutorial!

    ReplyDelete
  31. sir, i need recent posts by category, please help

    ReplyDelete
  32. Hi, thanks for the great widget! Can I make the thumbnails bigger?

    ReplyDelete
  33. Hi, your plugin is great. However, I have two question:
    1. Is it possible to render the thumbnails in higher resolution?
    2. If a post does not include squared image, a thumbnail is not shown. How can this be resolved?
    Thanks for your help!

    ReplyDelete
  34. when i will ti get bigger the pictures.. the quality is noise ... how can i fix this ?

    ReplyDelete
  35. A big MMmmmmmmmmmmmuahhhh , Love youuuuu

    Regards
    TECH ANDROIDING

    ReplyDelete
  36. this is sooperb, very very thanks

    Regards,
    bad masti

    ReplyDelete
  37. This works real well, my only problem is the post summary doesn't show up. How do I fix this?

    ReplyDelete
  38. Nevermind, I figured it out. Thanks!

    ReplyDelete
  39. Sir this widget is taking more time to display, anything have to be done to make it optimise,

    Regards,
    Computer Innovations

    ReplyDelete
  40. Excellent post for recent posts..

    ReplyDelete