Animated Sliding Recent Post Widget For Blogger

One of my friend ask me sliding "Recent Post Widget For Blogger". I have searched for this in Google and I found some interesting codes for sliding recent post widget. Here I am sharing one of them, which I have also used in my blog.

In previous posts, I explained Calculate age using java script, jQuery .toggleClass() example, jQuery Draggable Div Example in ASP.Net, jQuery Resizable Div Example in ASP.Net, Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example an other article related to jQuery and Java Script.



To implement the sliding recent post widget in your blog. You can go through the following steps-

1. Go to Blogger > Open Layout Tab
2. Now add a new HTML/Java Script widget.
    
3. Now add the following code shown below-
   <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:265px;
   overflow:hidden;
   list-style-type: none;
   padding: 0px 0px;
   margin:0px 0px;
   }
   #spylist li {
   width:250px;
   padding: 0;
   margin:3px;
   list-style-type:none;
   float:none;
   min-height:75px;
   height:auto;
   overflow: hidden;
   background-color:#EEE9DD;
   border:1px solid #ddd;
   }
   #spylist li a {
   text-decoration:none;
   color:#993200;
   font-size:11px;
   height:18px;
   overflow:hidden;
   margin:0;
   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/AVvXsEi78ap_t0HgHDYxhVdOYrkep9yM9YM-qI4woi_OJ6trs0HVfhyphenhyphenNc2-s8iZMbtrqf5BRZ_TZBjY39OPDq9jnulEm00ACPICkUQO8zvDvcdO8XlsHF9lScAtLSC33jOQi1CEGHp2c_VgN-Ps2/s1600/No+Image+1.gif";
   imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78ap_t0HgHDYxhVdOYrkep9yM9YM-qI4woi_OJ6trs0HVfhyphenhyphenNc2-s8iZMbtrqf5BRZ_TZBjY39OPDq9jnulEm00ACPICkUQO8zvDvcdO8XlsHF9lScAtLSC33jOQi1CEGHp2c_VgN-Ps2/s1600/No+Image+1.gif";
   imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78ap_t0HgHDYxhVdOYrkep9yM9YM-qI4woi_OJ6trs0HVfhyphenhyphenNc2-s8iZMbtrqf5BRZ_TZBjY39OPDq9jnulEm00ACPICkUQO8zvDvcdO8XlsHF9lScAtLSC33jOQi1CEGHp2c_VgN-Ps2/s1600/No+Image+1.gif";
   imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78ap_t0HgHDYxhVdOYrkep9yM9YM-qI4woi_OJ6trs0HVfhyphenhyphenNc2-s8iZMbtrqf5BRZ_TZBjY39OPDq9jnulEm00ACPICkUQO8zvDvcdO8XlsHF9lScAtLSC33jOQi1CEGHp2c_VgN-Ps2/s1600/No+Image+1.gif";
   imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78ap_t0HgHDYxhVdOYrkep9yM9YM-qI4woi_OJ6trs0HVfhyphenhyphenNc2-s8iZMbtrqf5BRZ_TZBjY39OPDq9jnulEm00ACPICkUQO8zvDvcdO8XlsHF9lScAtLSC33jOQi1CEGHp2c_VgN-Ps2/s1600/No+Image+1.gif";
   showRandomImg = true;
   boxwidth = 255;
   cellspacing = 6;
   borderColor = "#232c35";
   bgTD = "#000000";
   thumbwidth = 70;
   thumbheight = 70;
   fntsize = 12;
   acolor = "#666";
   aBold = true;
   icon = " ";
   text = "comment";
   showPostDate = true;
   summaryPost = 35;
   summaryFontsize = 9;
   summaryColor = "#666";
   icon2 = " ";
   numposts = 25;
   home_page = "http://manish4dotnet.blogspot.com/";
   limitspy=4
   intervalspy=4000
   </script>
   <div id="spylist">
   <script src='https://dl.dropboxusercontent.com/s/yl10ewf1b6ds4ju/recentpost.js' type='text/javascript'></script>
   </div>

That's It. You can change the CSS of the above code according to your blog theme.
Happy blogging!!