Animated Recent Posts for Blogger with Thumbnails | Script

Hi Friendz now today i share Animated Recent Posts for Blogger with Thumbnails is nice way to show your recent posts in side bar with animation effect to your readers. So this is very fantastic way to get more clicks on your recent posts and present your new post in headlines update for your readers. Animated Recent Posts gadget shows your most recent posts with animated effect to move smoothly through the posts. We are giving you full tutorial about Animated Recent Posts for Blogger with Thumbnails. We also give you different types of recent post widget for your blog. You can simply add our code on your sidebar and it will show recent posts on your blog. We give you also demo of recent posts widget to show how to look this
on your blog.

                                                 Animated Recent Posts with Thumbnails for blogger

Follow below steps 2 add Animated Recent Posts for Blogger with Thumbnails on your blog:



Step 1st..
Login into your Blogger Account. Go to Your Blogger Dashboard and Click on Layout tab at the left side panel. Now click on Add a Gadget Link like below picture.

Step 2nd..
After click on Add a Gadget Link a popup window will open with all available gadgets. Select HTML/JavaScript from gadgets list. See below picture for more help.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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/AVvXsEj-nsVRmtQ6fx7zCBnFJv0cs0eoIHpm_XdtxMpRVFKzyJk0Iw_PyPMj3RLthdUujEFKvs0CXbEc4M1gWSOXCcKhbM12W8AKG86hQocjlgH3HyoB5jxAvMakgxaol3qbCH1oEBGZVR-mNKUt/s1600/24work-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><a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3KXMi_kalt978_iK3snx4ziJ4WOh9LoqqfrI4_WB5gceJHKi21Nj20JLyKDC0jt8uD8-0iS4mw-a1_oO4bqOowtvJo_ZhafCmu8O-HSKDQK7Wm6Qoe8TQh15wHi-MTf4koHNOoO-csTyu/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3KXMi_kalt978_iK3snx4ziJ4WOh9LoqqfrI4_WB5gceJHKi21Nj20JLyKDC0jt8uD8-0iS4mw-a1_oO4bqOowtvJo_ZhafCmu8O-HSKDQK7Wm6Qoe8TQh15wHi-MTf4koHNOoO-csTyu/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3KXMi_kalt978_iK3snx4ziJ4WOh9LoqqfrI4_WB5gceJHKi21Nj20JLyKDC0jt8uD8-0iS4mw-a1_oO4bqOowtvJo_ZhafCmu8O-HSKDQK7Wm6Qoe8TQh15wHi-MTf4koHNOoO-csTyu/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3KXMi_kalt978_iK3snx4ziJ4WOh9LoqqfrI4_WB5gceJHKi21Nj20JLyKDC0jt8uD8-0iS4mw-a1_oO4bqOowtvJo_ZhafCmu8O-HSKDQK7Wm6Qoe8TQh15wHi-MTf4koHNOoO-csTyu/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3KXMi_kalt978_iK3snx4ziJ4WOh9LoqqfrI4_WB5gceJHKi21Nj20JLyKDC0jt8uD8-0iS4mw-a1_oO4bqOowtvJo_ZhafCmu8O-HSKDQK7Wm6Qoe8TQh15wHi-MTf4koHNOoO-csTyu/s1600/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://ezdowns.blogspot.com/";
limitspy=4intervalspy=4000
</script>
<div id="spylist">
<script src='https://dl.dropboxusercontent.com/u/127448791/animated-recent-posts-ycode-1.js' type='text/javascript'></script>
</div>
<div style="font-family: arial, sans-serif; font-size: 8px;" class="ycdr"><a href="http:http://ezdowns.blogspot.com/2013/11/animated-recent-posts-for-blogger-with.html" target="_blank" title="Recent Post Widget">Animated Post Widget</a> <a href="http://ezdowns.blogspot.com/" target="_blank">Blogger</a></div>

Note: Change http://ezdowns.blogspot.com/ to Your Home page URL and Change 4 to number of recent post that you want to show in widget.  You can also change Width of this widget with change both width:220px and width:208px; in style section.