Animated Recent posts for blogger with thumbnails and Simple Spy

Post this time I will teach you how to make a recent post with a thumbnail and simple spy. And certainly recent post that I made this time different from the others, because of recent post that I make the thumbnail appear in these widgets.Examples of recent post can be seen here Interest to make this widget. Please follow this instruction below :

17+ Featured Content Slider for Blogger Using jQuery Tutorial

STEP #1
Log in to Blogger, go to Design ->

Add a Gadget of HTML/JavaScript type.

<a href="http://24work.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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>



<style type="text/css" media="screen">



<!--


#spylist {



overflow:hidden;



margin-top:5px;



padding:0px 0px;



height:350px;



}



#spylist ul{



width:220px;



overflow:hidden;



list-style-type: none;



padding: 0px 0px;



margin:0px 0px;



}



#spylist li {



width:208px;



padding: 5px 5px;



margin:0px 0px 5px 0px;



list-style-type:none;



float:none;



height:70px;



overflow: hidden;



background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNP3QKbQWDqbs_8pqcXq-sVdS_xPu674AzjCvU7ganbQHipKO-DIIJn9Aj4NzhHHrjpPl5Gn56py9DxTHaURvot0A4335IuJUFdEVGaejNU4A6Oers9g-Z10IukJKtpMtZbdVPOTWMfFuH/s1600/bdlab-blogspot-com.jpg) repeat-x;



border:1px solid #ddd;



}







#spylist li a {



text-decoration:none;



color:#4B545B;



font-size:11px;



height:18px;



overflow:hidden;



margin:0px 0px;



padding:0px 0px 2px 0px;



}



#spylist li img {



float:left;



margin-right:5px;



background:#EFEFEF;



border:0;



}



.spydate{



overflow:hidden;



font-size:10px;



color:#0284C2;



padding:2px 0px;



margin:1px 0px 0px 0px;



height:15px;



font-family:Tahoma,Arial,verdana, sans-serif;



}







.spycomment{



overflow:hidden;



font-family:Tahoma,Arial,verdana, sans-serif;



font-size:10px;



color:#262B2F;



padding:0px 0px;



margin:0px 0px;



}


-->



</style>


<script language='JavaScript'>


imgr = new Array();



imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGdu1UPq99UbbByesU32XxYcDCWndSYN-8XoRLT2ozgE-4FG-Cm9s_uLvGke6drEln10scFmuhfCkaD3KKS0kAJ43dbFxeUDXBTfh-KfDGRtUVaBW4rSoAWyuy3lb5jj0XV1tgMynCvU/s400/noimage.png";


imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGdu1UPq99UbbByesU32XxYcDCWndSYN-8XoRLT2ozgE-4FG-Cm9s_uLvGke6drEln10scFmuhfCkaD3KKS0kAJ43dbFxeUDXBTfh-KfDGRtUVaBW4rSoAWyuy3lb5jj0XV1tgMynCvU/s400/noimage.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGdu1UPq99UbbByesU32XxYcDCWndSYN-8XoRLT2ozgE-4FG-Cm9s_uLvGke6drEln10scFmuhfCkaD3KKS0kAJ43dbFxeUDXBTfh-KfDGRtUVaBW4rSoAWyuy3lb5jj0XV1tgMynCvU/s400/noimage.png";


imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGdu1UPq99UbbByesU32XxYcDCWndSYN-8XoRLT2ozgE-4FG-Cm9s_uLvGke6drEln10scFmuhfCkaD3KKS0kAJ43dbFxeUDXBTfh-KfDGRtUVaBW4rSoAWyuy3lb5jj0XV1tgMynCvU/s400/noimage.png";


imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGdu1UPq99UbbByesU32XxYcDCWndSYN-8XoRLT2ozgE-4FG-Cm9s_uLvGke6drEln10scFmuhfCkaD3KKS0kAJ43dbFxeUDXBTfh-KfDGRtUVaBW4rSoAWyuy3lb5jj0XV1tgMynCvU/s400/noimage.png";



showRandomImg = true;



boxwidth = 255;


cellspacing = 6;



borderColor = "#232c35";



bgTD = "#000000";



thumbwidth = 70;



thumbheight = 70;



fntsize = 12;


acolor = "#666";



aBold = true;



icon = " ";


text = "comments";



showPostDate = true;



summaryPost = 40;


summaryFontsize = 10;


summaryColor = "#666";


icon2 = " ";


numposts = 10;



home_page = "http://24works.blogspot.com/";







limitspy=4



intervalspy=4000







</script>







<div id="spylist">



<script src='http://safir85.ucoz.com/bdlab-blogspot/24work/recent-posts/animated_recent_posts.js' type='text/javascript'></script>



</div>

<span style="font-size:5px;position:absolute;"><a title='Blogger Widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span>

Now Click Save



Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :

1. homepage address
home_page = “http://24works.blogspot.com/”;

2. Style

from above style/css, you can change :

width : 220px;
width:208px:

customize base on your template
and
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
or background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNP3QKbQWDqbs_8pqcXq-sVdS_xPu674AzjCvU7ganbQHipKO-DIIJn9Aj4NzhHHrjpPl5Gn56py9DxTHaURvot0A4335IuJUFdEVGaejNU4A6Oers9g-Z10IukJKtpMtZbdVPOTWMfFuH/s1600/bdlab-blogspot-com.jpg) repeat-x;

Customize the colors of backuground

3. image size
thumbwidth = 70;
thumbheight = 70;

Match your needs

4. How many post you will show
numposts = 10;

Base on what you need to show

UPDATE:  I updated some of my posts, this post I update Animated Recent posts for Blogger / Blogspot with thumbnails - Simple Spy........

Thanks to  abu-farhan because this widget has been combined with simple animation Spy.