Animated Recent posts widget for blogger.

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

Click for 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