Auto Scrolling Recent Post Widget in Blogger

There are many recent post widgets shared by different bloggers  which are  only  moving when a mouse cursor touches it. It is very important to grab viewers' attention upon landing a certain page in our blog and see what is new on it so that they will have an idea if we are keep on  posting articles by which they could  also learn or gain some useful information  and consequently  they will  remember us. Now,  in these tutorial, I will show the steps on how to make a recent post widget that scrolls automatically, with mouse hover effect on image, and each snippet contains the post title,   post date, and the no of viewers who gave comments.

Live Demo

Auto Scrolling Recent Post Widget in Blogger

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

Step 2. Find the code </head>, and just above it paste the code below,

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

Note: Skip this step (2) if you have already installed a Jquery library on  your Blogger Template for it will not scroll if you have more than one (1) Jquery library.
Step 3. Save your template

Adding the Gadget in your Blogger Lay-out Page

Step 4. Copy the set of code below,

<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By helperblogger.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/AVvXsEil9ZRaQLtZ9GgpzbtnopR-9XfZeHmd_QYNl-wwc8q9bDYB-ZpUAvUZyZJ_5l8t7U6DhCKi2GmwwLEWJcY4yLiNd1TwU5_TcCpJhpNovxvBOveK7zxvKRcVAzdrEzHdoCapf_rhDLMGOHM/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: 2px;
    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/AVvXsEioF_Nqiul2h52RNnn7zegoFTn_IvE3r6oce9qCjtwM6TD5RquIl956_mwaD0_AMSiasv5HpEcz3m3VphSGp76CUZTB2pB4eQvYiv4Rv3GbjoNHFEJ2fyJgYtSK3PDho2Il4fa-iDfpJ6E/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioF_Nqiul2h52RNnn7zegoFTn_IvE3r6oce9qCjtwM6TD5RquIl956_mwaD0_AMSiasv5HpEcz3m3VphSGp76CUZTB2pB4eQvYiv4Rv3GbjoNHFEJ2fyJgYtSK3PDho2Il4fa-iDfpJ6E/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioF_Nqiul2h52RNnn7zegoFTn_IvE3r6oce9qCjtwM6TD5RquIl956_mwaD0_AMSiasv5HpEcz3m3VphSGp76CUZTB2pB4eQvYiv4Rv3GbjoNHFEJ2fyJgYtSK3PDho2Il4fa-iDfpJ6E/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioF_Nqiul2h52RNnn7zegoFTn_IvE3r6oce9qCjtwM6TD5RquIl956_mwaD0_AMSiasv5HpEcz3m3VphSGp76CUZTB2pB4eQvYiv4Rv3GbjoNHFEJ2fyJgYtSK3PDho2Il4fa-iDfpJ6E/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioF_Nqiul2h52RNnn7zegoFTn_IvE3r6oce9qCjtwM6TD5RquIl956_mwaD0_AMSiasv5HpEcz3m3VphSGp76CUZTB2pB4eQvYiv4Rv3GbjoNHFEJ2fyJgYtSK3PDho2Il4fa-iDfpJ6E/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://www.bloggingtipsandtrix.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>

Step 5.  Again go to  Blogger Dashboard, click Lay-out then select Add a Gadget,
Step 6. Scroll Down and select HTML/Javascript,
Step 7. In the empty box, paste the code that you have copy from Step 4,
Step 8. Hit the Save button and you have now a new recent post widget with self scrolling effect

Short Customization:
a. Replace  80 to adjust the individual height/box of the widget.
b. Replace  385 to customize/adjust the whole height of the widget.
c. Replace http://www.bloggingtipsandtrix.blogspot.com/ with your own blog URL.
d. Replace 10 with your desired number of posts to scroll in the widget.
e.  Replace 4  with your desired number of post to appear in widget. 
f.  Replace 4000  . Increase value will slow down the appearance/scrolling  of the next post. Decrease value will make the scrolling effect a  faster.

If you some questions regarding this post, we would highly appreciate to hear it. Please leave you comments at the comment box or to my contact page.
More Blessings to all bloggers! 
Source: helperblogger

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook