Recent Posts with Thumbnails Widget for Blogger



UPDATE:  I updated some of my posts, this post I update Recent Posts with Thumbnails Widget for Blogger / Blogspot........









STEP #1

Log in to Blogger, go to Layout ->Add a Gadget of HTML/JavaScript type.
 


Then add this code in to it:




<div id="24work">

<a href='http://bit.ly/work24'><img alt='blogger widgets' src='https://sites.google.com/site/bdlab12/24work/blogspot%2btutorial.png'/></a><script language="JavaScript">

imgr = new Array();



imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Fqy6I1MLtdg91IicYRwHbA3dSrdrv8wVkyXv-hjb9sqZihQmjnpkffEcTe5kcUqhegH-JWqzKKwMSBkH8QzYTmjh0RDVE4ZEhpaXjHZMl4t7d-jZjcqynOStH-6ei-G7M1ROFgkLiC0/s400/noimage.png";



imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Fqy6I1MLtdg91IicYRwHbA3dSrdrv8wVkyXv-hjb9sqZihQmjnpkffEcTe5kcUqhegH-JWqzKKwMSBkH8QzYTmjh0RDVE4ZEhpaXjHZMl4t7d-jZjcqynOStH-6ei-G7M1ROFgkLiC0/s400/noimage.png";



imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Fqy6I1MLtdg91IicYRwHbA3dSrdrv8wVkyXv-hjb9sqZihQmjnpkffEcTe5kcUqhegH-JWqzKKwMSBkH8QzYTmjh0RDVE4ZEhpaXjHZMl4t7d-jZjcqynOStH-6ei-G7M1ROFgkLiC0/s400/noimage.png";



imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Fqy6I1MLtdg91IicYRwHbA3dSrdrv8wVkyXv-hjb9sqZihQmjnpkffEcTe5kcUqhegH-JWqzKKwMSBkH8QzYTmjh0RDVE4ZEhpaXjHZMl4t7d-jZjcqynOStH-6ei-G7M1ROFgkLiC0/s400/noimage.png";



imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Fqy6I1MLtdg91IicYRwHbA3dSrdrv8wVkyXv-hjb9sqZihQmjnpkffEcTe5kcUqhegH-JWqzKKwMSBkH8QzYTmjh0RDVE4ZEhpaXjHZMl4t7d-jZjcqynOStH-6ei-G7M1ROFgkLiC0/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://24work.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://24work.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 : http://24work.blogspot.com/ (change this to your blog url)







And now click Save








Previous
Next Post »