http://blogearntipsandtricks.blogspot.com
TopBottom

    Show All Tips

    Read All Tips

    Read All Tips
Announcement:

Animated Recent Posts For Blogger

Tips and Tricks by Thangaraju at Monday, April 12, 2010
Share this post:
Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit



This recent posts widget is similar to the standard recent posts with thumbnails but with one great twist.This gadget displays your most recent posts and includes a small thumbnail but it has the added extra of using an animated effect that smoothly scrolls through the posts.

Animated Recent Posts For Blogger

Step 1. In your dashboard click 'Layout' > 'Add A Gadget' >



add a gadget blogger

Step 2. From the pop up window choose the Html/Javascript gadget

add html javascript blogger

Step 3. Copy the following code and paste it into the Html/Javascript 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://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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.YOURBLOG.BLOGSPOT.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://popular-post-blogger.googlecode.com/files/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Thanks to Abu Farhan for this code.

Note : You must change  in red to the address of your blog.

Labels: ,

0 comments:

Post a Comment