Animated Recent posts widget for blogger.

Recent posts for blogger with thumbnails and Simple Spy.Recent posts for blogger with thumbnails and Simple Spy

Live Demo
For bloggers put into Sidebar Gadget(add gadget) select html, copy all html below to that gadget:
 

<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(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.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] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
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://www.raudhatulmuhibbin.org/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
 <script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>    

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://name-your-blog.blogspot.com/”;

2. Style

#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(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;


border:1px solid #ddd;


}

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;

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