Latest Cool Animated Recent Post Widget With Thumbnail For Bloggers

If you want to add animated recent post widget then you should add this widget in your blog sidebar.Just follow steps for "Cool Animated Recent Post Widget with Thumbnail".

1. Log in your blogger account

2.Go to Layout

3.Click on Sidebar Add a Gadget

4.Click on HTML/JavaScript

5.Now copy this code and paste in this page .

<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.latestbloggertricks.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>

6.Replace "www.latestbloggertricks.com" in your blog name.

7. Click on Save and that's it.

Related Posts by Categories

Widgets

• Design a Widget for Your Blog
• Yahoo Smileys Emotions Hack in Comment Section
• How to add Animated Sexy Social Bookmarks Blogger?
• How to add Popular Post Widget for Blogger/Blogspot?
• Easy Navigate by Using Wibiya Toolbar For Blogger/Wordpress
• Increase Rank in Entrecard by Using Top Entrecard Droppers Widgets
• Add Recent Comments in Your Blogger from RSS Feed
• Build Traffic From Add Social Bookmark Buton in Every Blogger Post
• Show Related Post Under Each Post and Increase Pageviews
• 4 Places to Put Widgets on Blogger Free
• Attention to your Visitor from Twitter Buttons for Bloggers
• How to Install Recent Posts Widget with thumbnails?
• Random Posts Widget for Blogger in 3 Steps
• Add Tag Cloud Widget For Blogger in Very Easy Steps

Customize Template

• How to Add Syntax Highlighting in Blogger Post?
• How to Make Mouseover Navigation Menu withh CSS?
• Yahoo Smileys Emotions Hack in Comment Section
• Customize Footer Section with Three Columns
• Share Your Articles on Google Buzz Another Good Social Nework For Blogger
• Make Visible Your Comments to Your Visitor
• How to add Animated Sexy Social Bookmarks Blogger?
• How to make to Every Blog Post Summaries with Thumbnail?
• Protect Your Blogger Blog From Spam Comments
• Interact Your Visitor With Read More Feature
• How to make three Column Layouts in Blogger Template?
• How to add two ads below post title and increase earning?
• How to Install Recent Posts Widget with thumbnails?
• Show HTML/CSS Codes On Coloured Background In Blogger Posts

CSS

• How to Add Syntax Highlighting in Blogger Post?
• How to Make Mouseover Navigation Menu withh CSS?
• 50 CSS Layouts, Visual Effects and Forms Coding
• CSS Tab Navigation Scripts for Bloggers and Web Designers
• Make Visible Your Comments to Your Visitor
• How to make to Every Blog Post Summaries with Thumbnail?
• Compress Your CSS to Increase Fast Loading Speed of Blogger Page
• Show HTML/CSS Codes On Coloured Background In Blogger Posts