Add Animated Recent Posts Widget in Blogger

First Step

This widget works with jQuery spy effect so that we have to add jQuery library to our blog first (Note - Ignore this step if you have already added jQuery library to your blog.)

1. Go to Blogger Dashboard > Template

2. Click on Edit HTML

3. Hit Proceed button

4. Find </head> code in your template

5. Add below code just above it </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Now you have activated jQuery library into your blog. Now lets go to Second Step how to add scrolling recent posts widget to blogger. 

Second Step

1. Go to Blogger Dashboard > Layout

2. Add a Gadget

3. Select HTML/JavaScript

Paste below code inside it, 

<style type="text/css" media="screen">

<!--

/* ========== Scrolling Recent Posts Widget======== */

#santosh143-widget {

    overflow: hidden;

    margin-top: 5px;

    padding: 0px 0px;

    height: 385px;

}

#santosh143-widget ul {

    width: 295px;

    overflow: hidden;

    list-style-type: none;

    padding: 0px 0px;

    margin: 0px 0px;

}

#santosh143-widget li {

    width: 282px;

    padding: 5px 5px;

    margin: 0px 0px 5px 0px;

    list-style-type: none;

    float: none;

    height: 80px;

    overflow: hidden;

    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh23Uc_FccvcKZvWLXoocjVponUYTPFpTLmDidx8yJdrPutIg5LSKkBNhonfdhtVZJB0E6Rshdr4ofGiKoqpMqgKHVnoGTPwd-EntoSFlwXiZ14bjcI1X10JjnA6bdQPZawvC1r5F6PI3s/s1600/santosh143.com-post.jpg) repeat-x;

    border: 1px solid #ddd;

}

#santosh143-widget li a {

    text-decoration: none;

    color: #4B545B;

    font-size: 15px;

    height: 18px;

    overflow: hidden;

    margin: 0px 0px;

    padding: 0px 0px 2px 0px;

}

#santosh143-widget img {

    float: left;

    margin-top: 10px;

    margin-right: 15px;

    background: #EFEFEF;

    border: 0;

}

#santosh143-widget img {

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    transition: all 0.5s ease;

    padding: 4px;

    background: #eee;

    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));

    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;

    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);

    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);

    box-shadow: 0 0 3px rgba(0,0,0,.7);

}

#santosh143-widget img:hover {

    -moz-transform: scale(1.2) rotate(-350deg);

    -webkit-transform: scale(1.2) rotate(-350deg);

    -o-transform: scale(1.2) rotate(-350deg);

    -ms-transform: scale(1.2) rotate(-350deg);

    transform: scale(1.2) rotate(-350deg);

    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);

    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);

    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);

}

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

}

/* ========== Scrolling Recent Posts Widget ======== */

-->

</style>

<script language='JavaScript'> 

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qLe52F-oZWacv6zs2kGr8FUSOnflHYwjmVZB-mM58O1bCSt6RMhXeRCTIx4tWNfBeO8XOfgXsFdgYF93QJzLUE7vnsgxbk7agp_ISFnzDLbL_DDFyJbuHRXrPaDlY6vX2wyGg12geKE/s1600/santosh143.com-no-thumbnail.png.jpg";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qLe52F-oZWacv6zs2kGr8FUSOnflHYwjmVZB-mM58O1bCSt6RMhXeRCTIx4tWNfBeO8XOfgXsFdgYF93QJzLUE7vnsgxbk7agp_ISFnzDLbL_DDFyJbuHRXrPaDlY6vX2wyGg12geKE/s1600/santosh143.com-no-thumbnail.png.jpg";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qLe52F-oZWacv6zs2kGr8FUSOnflHYwjmVZB-mM58O1bCSt6RMhXeRCTIx4tWNfBeO8XOfgXsFdgYF93QJzLUE7vnsgxbk7agp_ISFnzDLbL_DDFyJbuHRXrPaDlY6vX2wyGg12geKE/s1600/santosh143.com-no-thumbnail.png.jpg";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qLe52F-oZWacv6zs2kGr8FUSOnflHYwjmVZB-mM58O1bCSt6RMhXeRCTIx4tWNfBeO8XOfgXsFdgYF93QJzLUE7vnsgxbk7agp_ISFnzDLbL_DDFyJbuHRXrPaDlY6vX2wyGg12geKE/s1600/santosh143.com-no-thumbnail.png.jpg";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qLe52F-oZWacv6zs2kGr8FUSOnflHYwjmVZB-mM58O1bCSt6RMhXeRCTIx4tWNfBeO8XOfgXsFdgYF93QJzLUE7vnsgxbk7agp_ISFnzDLbL_DDFyJbuHRXrPaDlY6vX2wyGg12geKE/s1600/santosh143.com-no-thumbnail.png.jpg";

showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 50;

thumbheight = 50;

fntsize = 15;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.YOUR_BLOG_URL_HERE.com/";

limitspy=4;

intervalspy=4000;

</script>

<div id="santosh143-widget">

<script src='http://santosh143.googlecode.com/svn/spyeffect.js' type='text/javascript'></script>

</div>