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='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]

48 comments

leviomat Author
31 July 2013 at 15:15

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

Reply
Amit Bhuriya Author
2 August 2013 at 14:08

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

gaane-shaane.blogspot.com

Reply
3 August 2013 at 00:27

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

Reply
John Miceli Author
22 September 2013 at 14:32

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

Reply
19 November 2013 at 19:11

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

Reply
Pranay Amle Author
21 November 2013 at 03:00

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

Reply
Rykoszetka Author
7 January 2014 at 08:50

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

Reply
8 January 2014 at 04:20

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

Reply
Outo Paimen Author
22 January 2014 at 13:33

Thanks! This is great!

Reply
10 February 2014 at 17:55

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

Reply
Raja Author
7 March 2014 at 03:16

It is not showing thumbnails in my blog.

Reply
kissmo Author
23 March 2014 at 09:36

It's not working please help..

Reply
Tong Author
1 April 2014 at 22:22

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

Reply
2 April 2014 at 01:45

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

Reply
Andrea M. Author
10 April 2014 at 03:55

All perfect! but the images are blurred...

Reply
arman Author
10 April 2014 at 04:40

nice widget, thanks

Reply
fateh tropis2 Author
28 May 2014 at 03:15

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

Reply
VAIBHAV GUPTA Author
28 May 2014 at 03:34

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

Reply
9 June 2014 at 14:43

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

Reply
denver sabado Author
11 June 2014 at 05:31

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

Reply
Deanna Samaan Author
8 July 2014 at 17:48

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

Reply
msmariah Author
14 July 2014 at 14:48

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.

Reply
Anonymous Author
18 July 2014 at 23:31

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

from vaibhav gupta

Reply
ilyass samih Author
24 July 2014 at 05:55

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

Reply
MD Nauman Author
18 August 2014 at 20:44

Thanks Working Like a Magic Great Widget

Reply
Oemar Gaptek Author
27 August 2014 at 19:56

why recently nor working again ?

js file dropbox Error (509)

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

Reply
Anonymous Author
29 August 2014 at 21:02

Your script hosted on dropbox is missing !

Reply
Anonymous Author
15 September 2014 at 15:13

The script stop to work!

Reply
17 September 2014 at 03:48

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

Reply
Daiva Author
18 September 2014 at 11:00

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)

Reply
12 November 2014 at 11:45

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

Reply
Mou Sube Author
14 November 2014 at 20:03

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

Reply
enlard Author
11 February 2015 at 19:16

How to set up the large, the small images?

Reply
sri raga Author
4 March 2015 at 19:09

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

Reply
MS Design Author
12 March 2015 at 02:43

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

Reply
Anonymous Author
15 April 2015 at 04:56

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

Reply
Rahul Yadav Author
30 April 2015 at 21:09

Thanks for the simple and great tutorial!

Reply
20 July 2015 at 12:10

sir, i need recent posts by category, please help

Reply
Anonymous Author
30 July 2015 at 15:45

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

Reply
1 September 2015 at 12:45

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!

Reply
Hakim Asri Author
24 February 2016 at 12:46

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

Reply
Ramees Kaztro Author
2 March 2016 at 04:27

A big MMmmmmmmmmmmmuahhhh , Love youuuuu

Regards
TECH ANDROIDING

Reply
14 April 2016 at 06:20

this is sooperb, very very thanks

Regards,
bad masti

Reply
21 April 2016 at 10:23

fabolous

Reply
Thomas Author
14 May 2016 at 10:57

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

Reply
Thomas Author
14 May 2016 at 11:02

Nevermind, I figured it out. Thanks!

Reply
cyber maddy Author
22 May 2016 at 08:48

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

Regards,
Computer Innovations

Reply
Exam Result Author
22 June 2016 at 03:40

Excellent post for recent posts..

Reply

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 |