Saturday, October 24, 2009

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

1 comments:

Lets Entertain on June 16, 2016 at 1:51 PM said...

I hope this blog of hacking also helps us by terming us about the how to hack whatsapp account questions.

Post a Comment

 
There was an error in this gadget

Please Help...

Hello...

Raj007
Tamil Nadu.
Simply The Best


BLOGEE TRICKS & HACKS © 2008 Business Ads Ready is Designed by Ipiet Supported by Tadpole's Notez