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!

Read the rest of this entry »

Posted in Animation , Blogger , Recent Post , Thumbnails , Widgets

How to add random post widget with thumbnails

Earlier I posted the HOW TO : Add Random Post Widget for Blogger/Blogspot and if you want a gadget which shows thumbnails, as showing in the image given below, from your blog then here is the solution for you.

Click on the button given below. If you are not logged in already to your Blogger account then it will ask you to login first after clicking on the Add To Blogger button below.

1. Now, select on which of your blog you want to add the Random Post widget.

2. Select the preferences which you want for your Random Post widget

3. Save the gadget and move it to where you want it to be appear on your blog.

4. All done. Now check your blog for the Random Post widget :)

Enjoy!

Read the rest of this entry »

Posted in Blogger , Random Post , Thumbnails , Widgets