How To Add Animated Scroll Recent Posts With Thumbnails For Blogger

It is difficult to learn for new bloggers that how to add recent animated posts widgets in blogger When people visit your blog it is important to keep them there for as long as possible, the longer someone is on your blog the more likely they will be to return and subscribe or follower.Displaying a list of your most recent posts in your sidebar is a great way to keep those visitors busy.

There are lots of recent posts widgets and archive widgets you can use but the one we will cover in this post will defiantly grab the attention of people on your blog. This widget displays your most recent posts and includes a small thumbnail, but has the added bonus of using an animated effect that moves smoothly through the posts.

How To Add Animated Scroll Recent Posts With Thumbnails To Blogger?

1. Login to your Blogger account.

2. Go to Layout > Add A Gadget.

3. In Add A Gadget window, select HTML/Javascript.

4. Copy the code below and Paste it inside the content box.

<p style="display:none;">Animated Scroll Recent Posts With Thumbnails For Blogger by <a href="http://filesflame.blogspot.com/">FILESFLAME</a></p>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq4CH43iCLIyHuPs2cPkVZkfJ1zhcCjzWS99FbDyJ9GmFu0apNq0DBGYucpmXqmUe3xNdFX06zlLLUVJi1YOJQhtdcI2LaAtSGva8QnUEENriDVpM-e6nbLznLs9I0QSVLJZD-Q-ThFp7B/s1600/bdlab-blogspot-com.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjACHhPeFjJjAOYybH6HomRpXjnXV0IiKhc-r1xW3qPNl2RdeSPXUzypsG3Mq3SVBHd0ctAnTR2libfSk-s0qULq2uCvvby4offwhU82FeBKg23CPZ3E5ZWW7pqQzTC4haP0Czqw_EklDM/s400/noimage.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjACHhPeFjJjAOYybH6HomRpXjnXV0IiKhc-r1xW3qPNl2RdeSPXUzypsG3Mq3SVBHd0ctAnTR2libfSk-s0qULq2uCvvby4offwhU82FeBKg23CPZ3E5ZWW7pqQzTC4haP0Czqw_EklDM/s400/noimage.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjACHhPeFjJjAOYybH6HomRpXjnXV0IiKhc-r1xW3qPNl2RdeSPXUzypsG3Mq3SVBHd0ctAnTR2libfSk-s0qULq2uCvvby4offwhU82FeBKg23CPZ3E5ZWW7pqQzTC4haP0Czqw_EklDM/s400/noimage.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjACHhPeFjJjAOYybH6HomRpXjnXV0IiKhc-r1xW3qPNl2RdeSPXUzypsG3Mq3SVBHd0ctAnTR2libfSk-s0qULq2uCvvby4offwhU82FeBKg23CPZ3E5ZWW7pqQzTC4haP0Czqw_EklDM/s400/noimage.png";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjACHhPeFjJjAOYybH6HomRpXjnXV0IiKhc-r1xW3qPNl2RdeSPXUzypsG3Mq3SVBHd0ctAnTR2libfSk-s0qULq2uCvvby4offwhU82FeBKg23CPZ3E5ZWW7pqQzTC4haP0Czqw_EklDM/s400/noimage.png";

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://ADDYOURWEBLINK.com/";

limitspy=4

intervalspy=4000
</script>
<div id="spylist">
<script src='http://beautifulbloggerwidgets.googlecode.com/files/animated_recent_posts.js' type='text/javascript'></script>
</div>
<!-- Animated Scroll Recent Posts With Thumbnails Script End -->
<center><a href="
http://filesflame.blogspot.com/2012/08/how-to-add-animated-scroll-recent-posts.html
" title="Animated Recent Posts" target="_blank"><small>Get This Widget</small></a></center>

5.search this code http://ADDYOURWEBLINK.COM from above code and change this link with yout own home page

6. save and enjoy