HOW TO ADD ANIMATED OR SLIDING RECENT POST WIDGET FOR BLOGGER

1. Login into blogger.com
2. Select your blog if you have many
3. Then migrate to Layout --> Click on "Add A Gadget"
4. You get a windows open then find for HTML / JAVASCRIPT and click "+" button
5. Then copy the below code and paste it there and make your editing.
6. Then click on save.
7. You may visit you blog and have fun. Remember you can also move your widget and choose a better place for your popular post widget with scrolling effect for blogger.

<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:4px;
padding:0px 0px;
height:349px;
}
#spylist ul{
width:219px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:209px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:69px;
overflow: hidden;
background:#fff url(https://lh3.googleusercontent.com/-ubVM3kVufho/UUVwDo0TLKI/AAAAAAAABBE/l2QxU6Z363U/h120/bdlab-blogspot-com.jpg) repeat-x;
border:2px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#444e56;
font-size:12px;
height:17px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#f4eeee;
border:0;
}
.spydate{
overflow:hidden;
font-size:11px;
color:#007cb5;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:14px;
font-family:Tahoma,Arial,sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:9px;
color:#272b2e;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";

imgr[1] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";

imgr[2] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";

imgr[3] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";

imgr[4] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";

showRandomImg = true;
boxwidth = 254;
cellspacing = 5;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 69;
thumbheight = 69;
fntsize = 13;
acolor = "#555";
aBold = false;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 39;
summaryFontsize = 9;
summaryColor = "#555";
icon2 = " ";
numposts = 9;
home_page = "http://wehelpalways.blogspot.in/";
limitspy=3
intervalspy=3000
</script>
<div id="spylist">
<script src='https://relatedpostcbt.googlecode.com/files/recentpost.js' type='text/javascript'></script>
</div>

1. Now go for TEMPLATE --> Click on "EDIT HTML"
2. Then find for </head> then copy the below code and paste the code just above / before it.
3. Then click on save template.

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

CUSTOMIZATION OF THE ABOVE CODE

Just find the highlighted codes and make the changes, as you wish to appear it in your blog.

1. Also the yellow highlighted code with the link "http://wehelpalways.blogspot.in/" and you need to change the code also. 
2. Remember you can also have a look at the width and heights, If you want to change the thumb image , width and height then go for thumbwidth = 69;  thumbheight = 69; 
3. And If you want to delete the date from the widget than go for this showPostDate = true; and replace it with showPostDate = False; 
4. You Can Change Summery, Color And Size Of Font using this code

summaryPost = 39;

summaryFontsize = 9;

summaryColor = "#555";

You Can Change Number Of Post By Editing this numposts = 9; Hope everything is done. I made maximum customization to your widget. After editing click on save and remember if you like this widget then comment below and share the link of the post with your friends.

HOPE THIS IS DONE

ALSO HAVE A LOOK AT VIDEO TUTORIAL BELOW IF ANY DOUBTS IN ADDING THE CODE