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.

scrolling recent post widget

Live Demo

Auto Scrolling Recent Post Widget in Blogger


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

self scrolling recent post

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://lh6.googleusercontent.com/-A6a829gqfDQ/T-3xppy6MlI/AAAAAAAACFE/RrOao4P11Uk/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://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[1] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[2] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[3] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[4] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/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:
tilt  hover effect
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


Express yourself!
4 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV
  1. Hi my family member! I wish to say that this
    post is awesome, great written and come with approximately all vital infos.
    I'd like to see more posts like this .

    Take a look at my web page short urls

    ReplyDelete
  2. Great post. I was checking constantly this blog and I am impressed!

    Extremely useful info specifically the last part :) I
    care for such information a lot. I was looking for this particular information for a long time.
    Thank you and best of luck.

    my web page short links

    ReplyDelete
  3. Hi there, І ԁiscoѵered your site via Google
    whilst ѕearсhing fοr a ѕimilar mattеr, your website сame up,
    it аppears good. I've bookmarked it in my google bookmarks.
    Hello there, just changed into alert to your blog via Google, and found that it's truly
    informatіve. I am goіng to wаtch out for brussels.
    I will be grаteful should you proceed this in future.
    Lots оf ρеople might be benefited out of
    your writing. Cheers!

    my homeрage: buy website visitors

    ReplyDelete
  4. Awesome recent post widget.I personally think widget is a important thing and every blogger must
    add widgets in their blog because it give more exposure of your blog to viewers and help to increase page views.Thanks

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...