Animated Recent posts widget for blogger.

Recent posts for blogger with thumbnails and Simple Spy.imageRecent 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:

 image

 

<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

Animated Recent posts widget for blogger. Animated Recent posts widget for blogger. Reviewed by Danish Yaqoob on 09:38:00 Rating: 5

No comments

Thanks for your comment.Keep visiting for latest updates from us.
Moreover, Subscribe Now!



FB Instagram Twitter Google+