Recent Posts Widget with Thumbnails for Blogger Blogs - EASY Installation

Looking for a recent posts widget with thumbnails like that one that I have on this blog?



It's actually very easy to install. Let me teach you how in 8 easy steps.

1. Go to Page Elements under Design Tab of your Blogger Dashboard



2. Click on Add a Gadget link


3. Choose HTML/Javascript



4. Type in any Title you want.



Then, on the second box, add this code:

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://farm3.static.flickr.com/2380/3839157772_29f033dabb_m.jpg";

imgr[1] = "http://farm3.static.flickr.com/2380/3839157772_29f033dabb_m.jpg";

imgr[2] = "http://farm3.static.flickr.com/2380/3839157772_29f033dabb_m.jpg";

imgr[3] = "http://farm3.static.flickr.com/2380/3839157772_29f033dabb_m.jpg";

imgr[4] = "http://farm3.static.flickr.com/2380/3839157772_29f033dabb_m.jpg";
showRandomImg = true;

boxwidth = 250;

cellspacing = 10;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 1;

acolor = "#666";

aBold = true;

icon = " ";

text = "";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = false;

numposts = 8;

home_page = "YOUR BLOG URL HERE";

</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx=s.join("");}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...';}function showrecentposts(json){document.write('<table width="'+boxwidth+'" border=0 bordercolor="#FF0000" align="left" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break;}}if("content"in entry){var postcontent=entry.content.$t;}else if("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;cmtext=(text!='no')?'<i><font color="'+acolor+'"></font></i>':'';var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;var trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td style="font-size: 12px;">'+icon+'<a href="'+posturl+'">'+posttitle+'</a> - <span style="font-size: 9px; color: #616161;'+cmtext+' </span></td></tr>';if(summaryPost==0){trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td>'+icon+'<a href="'+posturl+'">'+posttitle+'</a></td></tr>';}document.write(trtd);j++;}document.write('</table>');}document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");document.write('<a href="http://www.techpinas.com" style="font-size: 8px; text-decoration:none; color: #cccccc;">Technology News</a>');
//]]>
</script>

5. Edit a few code details.

a.) Put the URL of your blog. Make sure you write it in this format: http://www.[...] with *slash* in the end.
b.) At numposts attribute, put the number of recent blog posts you want to see on the widget.
c.) Edit boxwidth attibute to make widget fit your blog's sidebar better.
D.) Be careful with the javascript code. Incorrectly editing it leads to a non-working widget.

6. Click Save Button



7. View your blog to check if the widget is working well.

8. Make sure that all of your blogposts feature a photo to see actual thumbnails. If you don't include a photo on a blogpost, a yellow star thumbnail will be shown. To change this default picture, edit the imgr attribute.

That's it! I hope you find this helpful.

Enter your email address to subscribe to free daily TechPinas newsletter: