Recent Posts with Images Blogger Are you tired of using the recent posts widget for blogger that only displays recent post Titles with links? Here’s one new widget that displays the recent posts along with the thumbnail included in your post. Isn’t it interesting widget? Of course it is. Well, recent posts widget is the most have widget for your blog and this thumb nailed widget is more interactive to showcase your recent posts. I am sure you gonna drive some more traffic through this widget by displaying your recent posts with adjacent to the thumbnails. One more interesting thing is that if you have added recent posts widget through that RSS method, it only has the option to display up to five posts and now with this widget you can display as many posts as you want along with your desired colors and proper customization.

Widget Adding Instructions:

Follow these simple steps to get this widget on your blog.

1. Login to your Blogger Dashboard

2. Click on the blog’s Layout on which you want to add this widget.
Blogger Dashboard Layout

3. click Add a Page Element on spot you want to add this widget
Blogger Add a Gadget

4. Add Html/ Javascript (click “add to blog” under the page element Feed)
Blogger Add Html Javascript

5. Just copy and paste this code.


<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://bloggeruser.blogspot.com/";

</script>

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

6. Save the Widget.

Widget Customization

Customize Blogger Widget Edit the values under the following headings in the above html code to make the widget suitable for your blog.
(Edit the values to fit your blog)

boxwidth – Width of the widget
cellspacing – Space between cells (default one is good)
borderColor – Border color (add the background color of your template to perfectly blend it in the template)
thumbwidth & thumbheight – Width and Height of the thumbnail (default are good)
fntsize – Font size of the title
acolor – Color of the title
aBold – you want bold titles? (true or false)
numposts – How many posts you want to show?
home_page : http://yourblogurl.com/ (change this to your blog url)
Please download this script ( http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js )and upload to your server or some free pages.

Help and Comment

This widget is developed by Kranthi for her blog Blogger Tricks. Really thanks. If you have any problems or any queries related to this widget, Please leave a comment below and I would be glad to help you !You can also comment if this widget has really helped you as i said.
You may also be interested in exploring the Rss method of adding recent posts widget.

Published by Pradeep Singh

Pradeep is your host at BloggerUser helping you to build your blog by providing Blogger tips, tutorials, guides, free blogger templates and more.

4 Comments

  1. Hmm…..Nice

  2. I want to be able to hide my comments, recently added friends, things i said to people, etc. I just don't like how everyone can see what i said. & be able to go wall to wall and read a conversation I had with someone else.

  3. i cont add recent post widget to my blog which was u guide at https://bloggeruser.com/recent-posts-widget-with-images-for-blogger/
    kidly give guide with photos

    • @mahender: you should change everything that needs your blog address such as: in image coding, needs to replace that example address with your blog site…Check it all and replace it with yours, i’ve try and it’s so nice…Try it ^___^

Comments are closed.

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match