Recent Posts Widget with Thumbnails for Blogger

Posted On // 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='' 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('') 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      = "",      // If No Image
    blogURL     = "";       // Your Blog URL
<script src="" 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.



leviomat Author
1 August 2013 at 03:45

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

Amit Bhuriya Author
3 August 2013 at 02:38

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

3 August 2013 at 12:57

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

John Miceli Author
23 September 2013 at 03:02

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

20 November 2013 at 08:41

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

Pranay Amle Author
21 November 2013 at 16:30

i tried many times but not please..

Rykoszetka Author
7 January 2014 at 22:20

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

8 January 2014 at 17:50

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

Outo Paimen Author
23 January 2014 at 03:03

Thanks! This is great!

11 February 2014 at 07:25

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

Raja Author
7 March 2014 at 16:46

It is not showing thumbnails in my blog.

kissmo Author
23 March 2014 at 22:06

It's not working please help..

Tong Author
2 April 2014 at 10:52

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

2 April 2014 at 14:15

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

Andrea M. Author
10 April 2014 at 16:25

All perfect! but the images are blurred...

arman Author
10 April 2014 at 17:10

nice widget, thanks

fateh tropis2 Author
28 May 2014 at 15:45

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

28 May 2014 at 16:04

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 =
like this plz sir mujhe ye bata dijiye iski link mujhe =

10 June 2014 at 03:13

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

denver sabado Author
11 June 2014 at 18:01

men the image on my blog are no showing

Deanna Samaan Author
9 July 2014 at 06:18

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

msmariah Author
15 July 2014 at 03: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.

Anonymous Author
19 July 2014 at 12:01

i didnt understand sir plz right side in & post html how to do that

from vaibhav gupta

ilyass samih Author
24 July 2014 at 18:25

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

MD Nauman Author
19 August 2014 at 09:14

Thanks Working Like a Magic Great Widget

Oemar Gaptek Author
28 August 2014 at 08:26

why recently nor working again ?

js file dropbox Error (509)

Anonymous Author
30 August 2014 at 09:32

Your script hosted on dropbox is missing !

Anonymous Author
16 September 2014 at 03:43

The script stop to work!

17 September 2014 at 16:18

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

Daiva Author
18 September 2014 at 23:30

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.


13 November 2014 at 01:15

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

Mou Sube Author
15 November 2014 at 09:33

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

enlard Author
12 February 2015 at 08:46

How to set up the large, the small images?

sri raga Author
5 March 2015 at 08:39

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

MS Design Author
12 March 2015 at 15:13

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

Anonymous Author
15 April 2015 at 17:26

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

Rahul Yadav Author
1 May 2015 at 09:39

Thanks for the simple and great tutorial!

21 July 2015 at 00:40

sir, i need recent posts by category, please help

Anonymous Author
31 July 2015 at 04:15

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

2 September 2015 at 01:15

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!

Hakim Asri Author
25 February 2016 at 02:16

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

Ramees Kaztro Author
2 March 2016 at 17:57

A big MMmmmmmmmmmmmuahhhh , Love youuuuu


14 April 2016 at 18:50

this is sooperb, very very thanks

bad masti

21 April 2016 at 22:53


Thomas Author
14 May 2016 at 23:27

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

Thomas Author
14 May 2016 at 23:32

Nevermind, I figured it out. Thanks!

cyber maddy Author
22 May 2016 at 21:18

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

Computer Innovations

Exam Result Author
22 June 2016 at 16:10

Excellent post for recent posts..


Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Recent Posts Widget with Thumbnails for Blogger |