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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script style='text/javascript' src="http://code.helperblogger.com/hb-jquery-ticker.js" ></script>
<script style='text/javascript' src='http://code.helperblogger.com/hb-recentposts.js'></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'
});});
</script>
<div id="sai">
<script src='http://www.yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>



Now replace http://www.yourblog.blogspot.com 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.

Post a Comment

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

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

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

    ReplyDelete
    Replies
    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?

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

      Delete
  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...

    ReplyDelete
    Replies
    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...

      Delete
    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:
      http://pastebin.com/LYv3BLN2

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

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

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

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

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

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

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

      Delete
  6. It exist a error in a source code:
    The url http://helperblogger.webs.com/Files/hb-jquery-ticker.js is wrong.
    The ok url is: http://code.helperblogger.com/hb-jquery-ticker.js

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

      Delete
  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 once.Visit:-www.sportsophobic.com

    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

    ReplyDelete
  8. This comment has been removed by the author.

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

      http://www.helperblogger.com/2012/06/scrolling-recent-posts-widget-for.html

      Delete
    2. This comment has been removed by the author.

      Delete
  9. This comment has been removed by the author.

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

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

    ReplyDelete
  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)blogspot.com

    ReplyDelete
  13. thanks a lot...I m using this in my blog....
    http://andro-park.blogspot.in

    ReplyDelete
  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 http://andro-park.blogspot.in

    ReplyDelete
  15. http://www.cheapnikeshoxlist.net

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  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!!!
    Thanks,
    By Mcx Tips , Stock Tips

    ReplyDelete
  18. http://123indiaresults.blogspot.in/

    ReplyDelete
  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

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. Buddy Now this called a real piece of coding and work.
    My recent post:-http://www.skillblogger.com/2013/06/stylish-all-in-one-social-widget-with.html

    ReplyDelete
  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

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

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

    ReplyDelete
  25. http://aasish1.blogspot.com/ like computer tip AND COMPUTER BOOK

    ReplyDelete
  26. I implemented this on my blog, but it didn't work out...... What is wrong?

    ReplyDelete
  27. Please This Template model name Please

    ReplyDelete

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

 
Top