Tuesday, March 22, 2011

How to add animated recent post widget

How to add animated recent post widget
1. Log in to blogger and Go to  Design >> Page Element.

2. Click Add Gadget and select 'HTML/Javascript'

3.Paste below code.

<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.bloggertrix.com/";

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> 

* Replace http://www.bloggertrix.com/ with your site URL

4. Click save you are done.

Source

10 comments:

  1. Hi, I tried this but animation was not working..It was static. So i removed it. Can you please help that how to animate

    ReplyDelete
  2. Thanx a lot... Its working for me.

    Have a look : http://www.get-your-ebooks.blogspot.com/

    ReplyDelete
  3. hi its not working in www.frendzarena.com img is nt visible bro

    ReplyDelete
  4. its working fine friend. i tried from it other blog just now.try to add it again.if cant, may be template problem dear.

    ReplyDelete
  5. Hi, Animation is working but without thumbs?!.. The all thumbsframe in animation are empty. I wonder what is going wrong here?..

    ReplyDelete
  6. @Anonymous its working fine.this is not my code.if you have problem, you better ask it from the owner.
    i mentioned his site with source.

    ReplyDelete
  7. It is working at my site, thank you very much.

    ReplyDelete