How to add animated recent post with thumbnails


If you want to display the Recent Posts with thumbnails of your Blogger blog in animated style instead of the plain text as shown in the image given then now you can do that using the Animated Recent Post Widget With Thumbnails For Blogger/Blogspot.

To add the Animated Recent Post Widget With Thumbnails in your Blogger/Blogspot blog, just follow the easy steps given below.

1. Log in to your Blogger account

2. Now click on the Design on your Dashboard and then click on the Page Element.

3. Click on the Add A Gadget and select 'HTML/Javascript' widget

4.Copy and paste the given code below in the 'HTML/Javascript' box.

<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.bloggerehow.blogspot.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> <a href="http://www.bloggerehow.blogspot.com/"><font size="1px">Widget by Blogger eHow</font></a>


6. Now, just save the widget and check your blog for a new Recent Post Widget With Thumbnails

Enjoy!



2 comments:

GuildWars2Items said...

I love you not for the things you would bring to me but to accept everything you could bring Cheap Minecraft Gift Code, he true love is not for showing, but I am sure that even if all other people abandon me, you will still be my side Buy Xbox Live Points, I love you not because of who you are, but because of who I am when I am with you Ultimate Game Card


The consequences of today are determined by the actions of the past scarlet blade gold. To change your future, alter your decisions today scarlet blade gold, Experience is a hard teacher because she gives the test first, the lesson afterwards scarlet blade gold, but it takes character to keep you there.

Companion Escorts said...

Bangalore Escorts |
Independent Escorts Bangalore | Call Girls Bangalore |
High Profile Escorts |
Celebrity Escorts Bangalore
http://www.haveme.in

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Comments

Twitter Delicious Facebook Digg Favorites More