Animated Sliding Recent Post Widget For Blogger

If you need a professional look of your blog, you must place an animated Recent Posts widget in your sidebar. As a good designer you must have a stylish blog. So your visitors are easily attracted. Its is very easy to add this widget. You have to put a code in HTML/JavaScripts box. Demo for this widget you can see in this blog.

Add This Widget To Blogger

1.  First log in to your blogger account. Go to Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript.
2. Now put the below code into HTML/JavaScript box.
   
   

   <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/AVvXsEgNOoxshJa_pwFInGlH8-S5zmIZzQIfyQL11kQ5Z4fT_aGQR44TFkKKOTvZW0O8UsMxb86CU_tAKb-heYKAyJV1mgud8_T91K7xQopidv-7qJ1XugYdeb48X8W3Ts9dom7uwNpZ1fE2zNfd/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/AVvXsEh3zv60VlYYan7OHb7TEBPiSNrwAG_E-JHsoQrZbcnDlGcrQW7KcErAlPwweHRzEOXlDi1Htu9C8kKYve231pcEuHZQFnD2Yq_AvMazH7zgpMFTBJ9IXLvGwGRkg-pApyFhfxeyTeJH5qQ/s400/noimage.png";
   imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3zv60VlYYan7OHb7TEBPiSNrwAG_E-JHsoQrZbcnDlGcrQW7KcErAlPwweHRzEOXlDi1Htu9C8kKYve231pcEuHZQFnD2Yq_AvMazH7zgpMFTBJ9IXLvGwGRkg-pApyFhfxeyTeJH5qQ/s400/noimage.png";
   imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3zv60VlYYan7OHb7TEBPiSNrwAG_E-JHsoQrZbcnDlGcrQW7KcErAlPwweHRzEOXlDi1Htu9C8kKYve231pcEuHZQFnD2Yq_AvMazH7zgpMFTBJ9IXLvGwGRkg-pApyFhfxeyTeJH5qQ/s400/noimage.png";
   imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3zv60VlYYan7OHb7TEBPiSNrwAG_E-JHsoQrZbcnDlGcrQW7KcErAlPwweHRzEOXlDi1Htu9C8kKYve231pcEuHZQFnD2Yq_AvMazH7zgpMFTBJ9IXLvGwGRkg-pApyFhfxeyTeJH5qQ/s400/noimage.png";
   imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3zv60VlYYan7OHb7TEBPiSNrwAG_E-JHsoQrZbcnDlGcrQW7KcErAlPwweHRzEOXlDi1Htu9C8kKYve231pcEuHZQFnD2Yq_AvMazH7zgpMFTBJ9IXLvGwGRkg-pApyFhfxeyTeJH5qQ/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://www.mybesttricks.com/";
   limitspy=5
   intervalspy=4000
   </script>
   <div id="spylist">
   <script src='http://safir85.ucoz.com/bdlab-blogspot/24work/recent-posts/animated_recent_posts.js' type='text/javascript'></script>
   </div>
   

3. In above code just change http://www.mybesttricks.com/ [the blue line] with your blog link or url. 

Need Help? ~ Comment Here