Recent Posts Widget with Thumbnails for Blogger

Dhiraj Barnwal Friday, 31 May 2013 48 comments


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('http://4.bp.blogspot.com/-0E2ZARxMyAo/UZwiR3XjlvI/AAAAAAAAKDc/3Z8WjltqbCQ/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]
Labels:
Google+ Pinterest

48 Comments to Recent Posts Widget with Thumbnails for Blogger Post Yours! Read Comment Policy ▼

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

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

gaane-shaane.blogspot.com

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

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

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

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

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

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

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

It is not showing thumbnails in my blog.

It's not working please help..

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

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

All perfect! but the images are blurred...

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

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

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

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

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

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.

i didnt understand sir plz right side in http://muhammadniaz.net/ & post html how to do that

from vaibhav gupta

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

Thanks Working Like a Magic Great Widget

why recently nor working again ?

js file dropbox Error (509)

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

Your script hosted on dropbox is missing !

The script stop to work!

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

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)

this widget is not working properly on my blog . its now showing thumbnai pictures.

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! ^^

How to set up the large, the small images?

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

Nice Working... Thanks for share this...

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

Thanks for the simple and great tutorial!

sir, i need recent posts by category, please help

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

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!

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

A big MMmmmmmmmmmmmuahhhh , Love youuuuu

Regards
TECH ANDROIDING

this is sooperb, very very thanks

Regards,
bad masti

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

Nevermind, I figured it out. Thanks!

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

Regards,
Computer Innovations

Excellent post for recent posts..