Scrolling/Ticker Recent Post Gadget For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials


Sunday, 26 February 2012

Scrolling/Ticker Recent Post Gadget For Blogger

You may found many widgets for displaying recent posts from your blog,but they can show only a selected number of posts.If you set more number of posts then it will take more space of your blog.By adding scrolling recent posts widget to your blog you can show more number posts without taking so much space of your blog.Also this widget is highly customizable there are so many things which you can customize.This gadget is created by Prayag of Stylifyyourblog so I gave credits to him.Now lets see a list of customizable things.

You Can Customize These Things

  1. Total Number of Recent Posts To Display.
  2. Showing Post Thumbnails.
  3. Display More Button.
  4. Number Of Comments.
  5. Date Of Post.
  6. Show Post Summary.
  7. Number Of Characters In Post Summary.
  8. Scrolling Speed.
  9. Number of Posts At a Time.
  10. Pause Scrolling On Mouse Hover.

How To Add This Widget To Your Blog?

  • Go to Blogger Dashboard > Design > Edit/Page Layout.
  • Click Add a Gadget > HTML/JavaScript.
  • Paste below code and save it.

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script src=""></script>
<script style='text/javascript' src="" ></script>
<script style='text/javascript' src=''></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
<div id="sai">
<script src=''></script>

Now replace with your blog URL.

Optional Customizations

  • To change total number of posts find this code var numposts = 7; 
  • If you don't want to show post thumbnails then change this value var showpostthumbnails = true; to false.

Now with using above tricks you can customize this widget so easily.

Read the property and change the value as you wish.You can find these properties from line number 06 to 19 in above code.

To view live demo of your changes you can use our HTML Editor.


  1. I place it on my blog but its static, not moving..

    1. @Andrija - your blog should have minimum 5 posts to scroll.

  2. I puted some other test posts but still nothing :(

    1. Hey Andrija,I have checked my code with your blog URL and it is working.Did you edited anything while adding the code in your blog?

    2. hey it's working on on side bar....

  3. I channged a layout a little bit, then I added this code again but now its not moving....but,before that changing layout it was scrolling up but the posts was repeated and then when the last one goeses up the recent posts bar was staying empty...

    1. You are doing something wrong while editing the code.Pls tell me to customization that you want to do I will do it for you...

    2. hi. Same for me , i copied code from this page ,added my blog to feed but posts no scroll.
      I have more posts on my blog , and i set var numposts = 10; i see all posts but no auto scroll :( what is wrong?
      Here is my code:

    3. @ All - If you have already added jquery to your blog then try it after removinge this line from above code

      <script src=""></script>

    4. When I removed this line, the widget is not visible.

    5. What is your blog URL? so that I can find and fix the problem very easily?

  4. Thanx its really works on my site .. ameen

  5. I tried it and mine is completely blank. It's not working.

    1. @Healing Foods - Follow my comment which I posted on (11 May 2012 00:19)

  6. It exist a error in a source code:
    The url is wrong.
    The ok url is:

    1. Thanks a lot for informing me,I have updated the script URL :)

  7. It was a great journey to ur blog from last 1 week.Finally the time to thank you and appreciate Ur awesome works.You posts and widgets are really unique.Thanks a lot.But Rahul can u help me

    And In my blog i made it 5 post but still not moving...And another thing i wana tell u that on my home page I have 2posts.So I wan it to be on the widget that my 1st two post doesn't come on the widget of my right sidebar...

    Please check

  8. This comment has been removed by the author.

    1. Hey buddies I have posted a advanced version of this widget,check this out -

    2. This comment has been removed by the author.

  9. This comment has been removed by the author.

  10. how to scroll or flash or ticker a individual or a label recent post in blogger

  11. It is a nice recent post. I like this

  12. Thanks a lot its working well. Really was looking for it. I'm a newbie and i'm much satisfied with ur post. My blog URL 5funs(dot)

  13. thanks a lot...I m using this in my blog....

  14. I just want to know is there any simple way to change the scroller animation???

    I know it possible by editing the script...
    but any other way???

    pls.... if possible ...tell me here


  16. This comment has been removed by the author.

  17. This site is nice and very useful information!!
    To design web sites or making blogs here many information is there.
    When I Try to Design my blog Free Mcx Tips , Free Stock Tips I found this Site!!! Really very excellent!!!
    By Mcx Tips , Stock Tips


  19. Awesome just awesome article. I think this article may help my friend also that’s why I just share this article with my facebook. I am a regular reader of this blog. I learn a lot from your writing. Once again want to tell you good job. Thank you.
    My site: AVOWBD

  20. This comment has been removed by the author.

  21. Buddy Now this called a real piece of coding and work.
    My recent post:-

  22. This is really really bad for your website!

    Your site is full of unnecessary gadgets and advertisement which are not good at all. Please remove them immediately. Visitors will be very angry with you when they will find your site too much slow!

    Once they leave your site, they will never back. So make your site simple, lighter and faster.

    Read more here: How to speed up your website Load times

  23. yr its only working on side bar... not on top or middle

  24. very useful article! it works on my blog thank you so mucccchhh :3

  25. like computer tip AND COMPUTER BOOK


If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM