Animated Recent posts for blogger with thumbnails and Simple Spy

STEP #1 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type. 

Then add this code in to it:

<a href='http://bit.ly/work24'><img alt='Blogger Widgets' src='https://sites.google.com/site/bdlab12/24work/Blogspot%2BTutorial.png'/></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/AVvXsEjY8QQml6XeDbcmA-cWOsPncqXsWLinOqEF5ckKV3rwVs1kdbBxYK9oklP5qGX86154kXbAYmkDTpnebqYKJft4pdmmibkOrrxh7HjPwhpDnDRAH-dPv72Jk4TXEHqN9plpwTVsPQV7AqnC/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/AVvXsEgdYIrg-agCN6kaL_gt43XKaeRUYdPAGD70hcKzH84vl54DpjjHL4bPilrV8GBd4kxBaI8sP-YseESIzpboBQrQ6jW4HD6Z5Tq9To7fzHXiKXagL1Ud3VN-5MvKpHvXEj4XKpy0IHUXI9c/s400/noimage.png";







imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYIrg-agCN6kaL_gt43XKaeRUYdPAGD70hcKzH84vl54DpjjHL4bPilrV8GBd4kxBaI8sP-YseESIzpboBQrQ6jW4HD6Z5Tq9To7fzHXiKXagL1Ud3VN-5MvKpHvXEj4XKpy0IHUXI9c/s400/noimage.png";







imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYIrg-agCN6kaL_gt43XKaeRUYdPAGD70hcKzH84vl54DpjjHL4bPilrV8GBd4kxBaI8sP-YseESIzpboBQrQ6jW4HD6Z5Tq9To7fzHXiKXagL1Ud3VN-5MvKpHvXEj4XKpy0IHUXI9c/s400/noimage.png";







imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYIrg-agCN6kaL_gt43XKaeRUYdPAGD70hcKzH84vl54DpjjHL4bPilrV8GBd4kxBaI8sP-YseESIzpboBQrQ6jW4HD6Z5Tq9To7fzHXiKXagL1Ud3VN-5MvKpHvXEj4XKpy0IHUXI9c/s400/noimage.png";







imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYIrg-agCN6kaL_gt43XKaeRUYdPAGD70hcKzH84vl54DpjjHL4bPilrV8GBd4kxBaI8sP-YseESIzpboBQrQ6jW4HD6Z5Tq9To7fzHXiKXagL1Ud3VN-5MvKpHvXEj4XKpy0IHUXI9c/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://24work.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>

And 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://24work.blogspot.com/”;

2. Style

from above style/css, you can change :

width

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/AVvXsEjY8QQml6XeDbcmA-cWOsPncqXsWLinOqEF5ckKV3rwVs1kdbBxYK9oklP5qGX86154kXbAYmkDTpnebqYKJft4pdmmibkOrrxh7HjPwhpDnDRAH-dPv72Jk4TXEHqN9plpwTVsPQV7AqnC/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........