How to Add Veretical Recent Posts with Thumbnails widget to your Blogger

Displaying small thumbnail images adjacent to post titles in the recent post widget on blogs not only looks nice, but also entice visitors to click on your posts. So how to do it in Blogger? This post explains how to add Recent Posts widget in Blogger with image thumbnails.this Gadget will help you to display the most Recent Posts on your Blog’s Sidebar. The Gadget has an options panel and can be configured to meet your needs.

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

2. Go to Design » Add a gadget » html/javascript

3. Just copy and paste this code..



<div id="24work">
<a href="http://destinywebdesigns.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script language="JavaScript"> 
imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyPRdXnqhXbzNJ-Iza7mJYSEHq8mJPvs88KAFwb1RbeCSJ7vD0FAHwh4KjDQsYkyEP59bt85s_jAUEay_avmhGT2vdFcnxQ5Vs1PctQeWDQJMpw4ZjVFMWOA6897fhJjT2LKs1Lygwgpc/s400/noimage.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyPRdXnqhXbzNJ-Iza7mJYSEHq8mJPvs88KAFwb1RbeCSJ7vD0FAHwh4KjDQsYkyEP59bt85s_jAUEay_avmhGT2vdFcnxQ5Vs1PctQeWDQJMpw4ZjVFMWOA6897fhJjT2LKs1Lygwgpc/s400/noimage.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyPRdXnqhXbzNJ-Iza7mJYSEHq8mJPvs88KAFwb1RbeCSJ7vD0FAHwh4KjDQsYkyEP59bt85s_jAUEay_avmhGT2vdFcnxQ5Vs1PctQeWDQJMpw4ZjVFMWOA6897fhJjT2LKs1Lygwgpc/s400/noimage.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyPRdXnqhXbzNJ-Iza7mJYSEHq8mJPvs88KAFwb1RbeCSJ7vD0FAHwh4KjDQsYkyEP59bt85s_jAUEay_avmhGT2vdFcnxQ5Vs1PctQeWDQJMpw4ZjVFMWOA6897fhJjT2LKs1Lygwgpc/s400/noimage.png";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyPRdXnqhXbzNJ-Iza7mJYSEHq8mJPvs88KAFwb1RbeCSJ7vD0FAHwh4KjDQsYkyEP59bt85s_jAUEay_avmhGT2vdFcnxQ5Vs1PctQeWDQJMpw4ZjVFMWOA6897fhJjT2LKs1Lygwgpc/s400/noimage.png";


showRandomImg = true;

tablewidth = 298;
cellspacing = 8; 
borderColor = "#ffffff"; 
bgTD = "#ffffff";

imgwidth = 80; 
imgheight = 80;

fntsize = 12; 
acolor = "#666"; 
aBold = true; 
icon = " ";

text = "no";

showPostDate = false;

summaryPost = 50; 
summaryFontsize = 11; 
summaryColor = "#666"; 
icon2 = " ";

numposts = 5;

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

</script> 
<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/rec-thumbnail/recentposts_thumbnail-1.js"></script>
<span style="font-size:5px;position:absolute;"><a title='blogger widget' href="http://destinywebdesign.blogspot.com" target='_blank'>Blogspot Tutorial</a></span></div>



EXPLANATION:

(Edit the values to fit your blog)

tablewidth - 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 titleaBold - you want bold titles? (true or false)

numposts - How many posts you want to show?

home_page : https://destinywebdesigns.blogspot.com/ (change this to your blog url)


Now Click Save

this widget was made by [ http://www.instantfundas.com ]