Add Animated Scroll Recent Posts With Thumbnails For 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.

<!-- Please do not remove this credit and the “Get this widget” link at the bottom of the widget. -->
<!-- Animated Scroll Recent Posts With Thumbnails Script Start -->
<p style="display:none;">Animated Scroll Recent Posts With Thumbnails For Blogger by <a href="http://allnetworkshacks.blogspot.com/">allnetworkshack</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/AVvXsEhkOX5TfED4dv1jUx232VTYEIoqgkOQdvGs4qBgLu8Ea8bkfNy83lOK_VUR_psdaTTOgHO2TnEbuZk58Q3M4wTy8nGbq5vLrDgIUJLfsflKgRHCn_BV41vB9DVmw33g5EAXcNR49ly9x_Rm/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/AVvXsEi9R9h9zpR0vXhTRww4ZlfGS7CK6g2TBlwFZG2luhHng04PNwETfD8LLSHz8yq4GYXLo4D2foyvtCHpgBpNvJGhpip344sYjNhDpYPeamhoTbn0LIoNYg47O6lZ-EJOBNBqZmKxXHllwdE/s400/noimage.png";

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

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

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

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9R9h9zpR0vXhTRww4ZlfGS7CK6g2TBlwFZG2luhHng04PNwETfD8LLSHz8yq4GYXLo4D2foyvtCHpgBpNvJGhpip344sYjNhDpYPeamhoTbn0LIoNYg47O6lZ-EJOBNBqZmKxXHllwdE/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://allnetworkshacks.blogspot.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 -->

5. Save
Important : If you look in the code you will find http://beautifulbloggerwidgets.blogspot.com/ replace this with your blogs URL.

Optional Changes : There are lost of changes that can be made to the code if your comfortable making changes, the main edit you may want to make is the number of posts displayed.To change the number of posts that are scrolled through change the following :

numposts =10;

You can change from 10 to the number of posts you wish to have displayed.

Note: Find home_page = ""; and put your blog url like this home_page = "http://beautifulbloggerwidgets.blogspot.com/";

Now you should have a working Animated Scroll Recent Posts With Thumbnails on your blog.

Happy Blogging =) - Leave your Comments and Please Share this widget.

Note: This widget or any other feed based widget will work only on blogs having public feeds.