AUTO SCROLLING RECENT POSTS WIDGET TO BLOGGER

 AUTO SCROLLING  RECENT POSTS WIDGET TO BLOGGER

So,In this tutorial i will teach you how to add this auto scrolling recent post

widget in blogger.Scrolling recent posts widget is a great widget to show the recent posts from your blog with scroll effect.As we all know that designing blogger blogs is become easier now and every blogger designe her blog with awsome coding.You also design your blog if you have some knowledge about coding.So in this tutorial I have a great looking Scrolling effect recent posts widget for you which you can easily add to your blogger blogs. It is an awesome widget.and you can easily customize it according to your wish.

ADDING AND CUSTOMIZATION

1. Go to blogger >> Layout
2. Add a Gadget >> Add an HTML/JavaScript Widget
3. Now just copy all below code and paste it inside HTML/JavaScript Widget

<!-- /* ========== Scrolling Recent Posts Widget By irfitech.blogspot.com ======== */ #helperblogger-widget { overflow: hidden; margin-top: 5px; padding: 0px 0px; height: 385px; } #helperblogger-widget ul { width: 295px; overflow: hidden; list-style-type: none; padding: 0px 0px; margin: 0px 0px; } #helperblogger-widget li { width: 282px; padding: 5px 5px; margin: 0px 0px 5px 0px; list-style-type: none; float: none; height: 80px; overflow: hidden; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWqvn-0aXII8NzXyEAf3pD_gHsmzP08OB-jeR-IdF6KkjmeYWhSMQtVC_fn9reulHctGGA1vB6mMainX5_xF1J8ucVY2P1JHMEoe9UlLxJLbZWlhRj2Qjp5qJMKblncfM82TOUM9YNTIs/s1600/helperblogger.com-post.jpg) repeat-x; border: 1px solid #ddd; } #helperblogger-widget li a { text-decoration: none; color: #4B545B; font-size: 15px; height: 18px; overflow: hidden; margin: 0px 0px; padding: 0px 0px 2px 0px; } #helperblogger-widget img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; } #helperblogger-widget img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7); } #helperblogger-widget img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); } .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; } /* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */ --></style><script language='JavaScript'>imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWozgJykyOgRhDiOQvOQxp-gKgwzvv2wm8W45xS7hg9yFGRZpJ4riBCzEufIrlvZtWJkA8pkGRC1P8gwjL4KMEp08kSNwvig_sj8TZ-6mslnqPCbLObdR7aHq1jfb8mOJGtJ4b_o0CkOE/s1600/no-thumbnail.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWozgJykyOgRhDiOQvOQxp-gKgwzvv2wm8W45xS7hg9yFGRZpJ4riBCzEufIrlvZtWJkA8pkGRC1P8gwjL4KMEp08kSNwvig_sj8TZ-6mslnqPCbLObdR7aHq1jfb8mOJGtJ4b_o0CkOE/s1600/no-thumbnail.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWozgJykyOgRhDiOQvOQxp-gKgwzvv2wm8W45xS7hg9yFGRZpJ4riBCzEufIrlvZtWJkA8pkGRC1P8gwjL4KMEp08kSNwvig_sj8TZ-6mslnqPCbLObdR7aHq1jfb8mOJGtJ4b_o0CkOE/s1600/no-thumbnail.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWozgJykyOgRhDiOQvOQxp-gKgwzvv2wm8W45xS7hg9yFGRZpJ4riBCzEufIrlvZtWJkA8pkGRC1P8gwjL4KMEp08kSNwvig_sj8TZ-6mslnqPCbLObdR7aHq1jfb8mOJGtJ4b_o0CkOE/s1600/no-thumbnail.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWozgJykyOgRhDiOQvOQxp-gKgwzvv2wm8W45xS7hg9yFGRZpJ4riBCzEufIrlvZtWJkA8pkGRC1P8gwjL4KMEp08kSNwvig_sj8TZ-6mslnqPCbLObdR7aHq1jfb8mOJGtJ4b_o0CkOE/s1600/no-thumbnail.png"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 50; thumbheight = 50; fntsize = 15; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://irfitech.blogspot.com/"; limitspy=4; intervalspy=4000; </script><div id="helperblogger-widget"> <script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script></div>

1. Replace http://irfitech.blogspot.com with "your blog url"

Thats all save your widget

If you face any problem while adding this widget kindly leave your comment below so I will help you