How To Add Automatic Or Animated Recent Posts Widget in Blogger

It tips to help get animated recent posts for your blogs sites. It widget work very good. Only fallow this step.
 
Fallow This 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 By itsolution24u ======== */

# itsolution24u-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#itsolution24u-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#itsolution24u-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/AVvXsEhQCR03xQdbsgQt1dIgdZdhgKdW4mqZ39Zco7WsnJmJJIMCOAVgp0Jp5rPfLAfcqA6kl2hPe0H7PjTj0y0f1tsEyBhbyEgtNBvNLyhHKuyWzAXPZm1NtMoCWwq7tZu3LjKhPZ1XClfzDIY/s1600/santosh143.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#itsolution24u-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#itsolution24u-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#itsolution24u-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);
}

#itsolution24u-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 By itsolution24u ======== */

-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWG4vBMzDE_0CngWFEvLh63hQLlKVx9xQsZOvltv1Vzy4swnSoenm7xD_stfB7-jIKff3DTFIJcese7fOK1LMor_mLupT1bF2C3qW1jVXWWmoWbB9Fo09LA2z8ljXVnykEdoNqi40ITa4/s1600/santosh143.com-no-thumbnail.png.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWG4vBMzDE_0CngWFEvLh63hQLlKVx9xQsZOvltv1Vzy4swnSoenm7xD_stfB7-jIKff3DTFIJcese7fOK1LMor_mLupT1bF2C3qW1jVXWWmoWbB9Fo09LA2z8ljXVnykEdoNqi40ITa4/s1600/santosh143.com-no-thumbnail.png.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWG4vBMzDE_0CngWFEvLh63hQLlKVx9xQsZOvltv1Vzy4swnSoenm7xD_stfB7-jIKff3DTFIJcese7fOK1LMor_mLupT1bF2C3qW1jVXWWmoWbB9Fo09LA2z8ljXVnykEdoNqi40ITa4/s1600/santosh143.com-no-thumbnail.png.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWG4vBMzDE_0CngWFEvLh63hQLlKVx9xQsZOvltv1Vzy4swnSoenm7xD_stfB7-jIKff3DTFIJcese7fOK1LMor_mLupT1bF2C3qW1jVXWWmoWbB9Fo09LA2z8ljXVnykEdoNqi40ITa4/s1600/santosh143.com-no-thumbnail.png.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWG4vBMzDE_0CngWFEvLh63hQLlKVx9xQsZOvltv1Vzy4swnSoenm7xD_stfB7-jIKff3DTFIJcese7fOK1LMor_mLupT1bF2C3qW1jVXWWmoWbB9Fo09LA2z8ljXVnykEdoNqi40ITa4/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.freesoft24u.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="itsolution24u-widget">
<script src='http://santosh143.googlecode.com/svn/spyeffect.js' type='text/javascript'></script>
</div>
<div arial="arial" helvetica="helvetica" id="mashable" sans-serif="sans-serif" style="background: #EBEBEB; border-image: initial; border-top: 1px solid white; border: 1px solid #EBEBEB; font-size: 10px; padding: 1px 8px 1px 3px; text-align: right;">
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;">
                <a href="http://itsolution24u.blogspot.com/2013/07/how-to-add-automatic-or-animated-recent.html" target="_blank"> Get This �</a>
            </span>
        </div>



 Note:

Now replace https://www.itsolution24u.blogspot.com with your blog URL.

Edit this as per your requirement :

• numposts = 10; Total number of posts which you wants to scroll by this widget
• limitspy=4; Number of the posts to appear on the widget 

• intervalspy=4000; Scrolling speed of the widget,if you decreased the value speed of widget will increases.