Scrolling/Ticker Recent Post Gadget For Blogger

Displaying a list of the recent posts in your sidebar is a great way to keep your visitors busy. There are lots of recent posts gadgets you can use but the one we will be covering  in this post will definitely grab the attention of people on your blog.

This recent posts widget is similar to the standard recent posts with thumbnails but with one twist. It combines jQuery vticker plugin to produce a simple and sleek sliding effect that smoothly scrolls through the posts.

See Demo

Steps to Add it to Blogger:

1.Login to the Blogger account


2. Now Go to Design > Page Elements (For New Interface go to Layout)

3.Now in the sidebar Click on “Add a Gadget” and then choose the HTML/JavaScript gadget 

4.Now copy the following code and paste it into the HTML/JavaScript gadget : (How to copy code easily)

<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.4.2/jquery.min.js"></script>
<script style='text/javascript' src="http://stylifyyourblog1.googlecode.com/svn/trunk/recentpostticker.js" ></script>
<script style='text/javascript' src='http://tavristasos.googlecode.com/svn-history/r100/trunk/recentpostswiththumbnailsv3.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 = false;
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.YourBlogURL.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>

Updated: There were some issues people were facing ,just externalized the JavaScript and its working fine now.

Important : If you have already included jQuery library in your Blog then remove the Line 2 from Above code

Important : If you look in the code you will find http://www.YourBlogURL.blogspot.com/ replace this with your blogs URL.

Optional Changes :

There are lot of changes that can be made to the code , the main edit you may want to make is the number of posts scrolled and displayed. To change the number of posts that are scrolled through change the following present at Line 6:

numposts =7;

You can change from 7 to the number of posts you wish to have scrolled.

Now to change the number of post that are displayed at any given time ,change the following attribute present at Line 17:

showItems:3

You can change from 3 to the number of posts you wish to have displayed at any given time.

To change the time interval and speed of the scroll Change speed:500 & pause:3000 present at Line 15-16 of the code. pause defines the Interval between the Scroll and speed defines at what pace is to the scroll done (all values are in microseconds).

Other changes like whether to display comments, description, Post date,etc can be done by changing the parameter from false to true (Present from Line 6 to 13 in code)

A Very Important Thing To Note : It might happen that the scroll effect might not work, the main reason behind this can be conflict between some jQuery plugin already present in your Blog, The most common solution to this is to add the following code after this gadget:

<script type='text/javascript'>
jQuery.noConflict();
</script>

If the scroll effect still doesn’t work then you might have to remove any other jQuery plugin completely so as to make this gadget work.

5.Now Click on Save.

See Demo

133 Replies to “Scrolling/Ticker Recent Post Gadget For Blogger”

  1. @mani
    You are right in saying that it will take some extra seconds but it will not gravely slow down loading as only an extra of 71 KB (70 KB – for jQuery library & another 1 KB – for vticker plugin) is loaded. At most a delay of 2-3 seconds will be experienced on the slowest of internet connections.

    1. Hi Aryan

      The problem is not with this gadget , your Blogger template is having some issues. I would suggest changing your Blogger template to some other template. I think you have removed attribution from your template and this is causing the whole problem

  2. Its a little different

    <style type="text/css">
    /*<![CDATA[*/
    #container {
    width:486px;
    margin:50px auto;
    }
    #frame {
    width:486px;
    height:300px;
    }
    /*//]]>*/
    </style>

    <script type="text/javascript">
    //<![CDATA[

    var pages=new Arrayundefined);
    pages[0]="http://forum.weborum.com/&quot;;
    pages[1]="http://www.htmlforums.com/&quot;;
    pages[2]="http://forum.w3schools.com/&quot;;

    var i=0;
    var time=15000; // this is set in milliseconds

    function pageChangeundefined) {
    document.getElementByIdundefined"frame").src=pages[i];
    i++;
    ifundefinedi==pages.length) {
    i=0;
    }
    setTimeoutundefined"pageChangeundefined)",time);
    }
    onload=pageChange;

    //]]>
    </script>

    <div id="container">
    <iframe id="frame" src="http://forum.weborum.com/&quot; frameborder="0"></iframe>
    </div>

  3. hey nice one
    but i want change in

    "Math.floor(Math.random()*randomcontent.length)"

    in script i have already given you

    there used (Math.random()
    so iframe will show up randomly but
    i just wana tweak tht

    i want it in series i have set forth so tht is up to me wich iframe to show up after refresh
    (NOT RANDOM) r u getin
    i appreciate u r effort

  4. @Up
    I might be fully wrong but my logic says that if you to accomplish the above task then you have to add a database element or cookies related things to capture the refresh thing into it (as how will you differentiate between a new user[a kind of refresh in itself] or a old user refresh[to go to the 2nd page] – you will have to store data somewhere that whether the user has visited the 1st time or 2nd time ,so to take out the data collection prob the time element was introduced)

    And even if do a series increment ,it will again be set to initial value when the page is refreshed (until and unless you do some data collection like use cookies)

    P.S. Google is the best resource for finding these kind of scripts

  5. I think I will try this app on one of my blogs. It may add too much loading time to my main blog, it already has a lot of information on it since it was started in 2007. Thank you for sharing the code for this app, it looks like it is great!

  6. @أسامة سعد
    As your blog already has jQuery present , so don't include it again (Remove Line 4)

    First try pasting the code directly into a HTML/JavaScript Gadget and see if it works,

    if it doesn't work then include the noconflict code in the first line of the gadget

    and also if you delete jQuery library present in your blog, then just copy paste the code & do the required changes (no need for no-conflict)

  7. @أسامة سعد

    Try this code

    <script type='text/javascript'>
    jQuery.noConflict();
    </script>
    <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 style='text/javascript'>
    //<![CDATA[
    (function($){$.fn.vTicker=function(e){var f={speed:700,pause:5000,showItems:3,animation:'',mousePause:true,isPaused:false};var e=$.extend(f,e);moveUp=function(a,b,c){if(c)return;var d=a.children('ul');first=d.children('li:first').clone(true);d.animate({top:'-=' b 'px'},e.speed,function(){$(this).children('li:first').remove();$(this).css('top','0px')});if(e.animation=='fade'){d.children('li:first').fadeOut(e.speed);d.children('li:last').hide().fadeIn(e.speed)}first.appendTo(d)};return this.each(function(){var a=$(this);var b=0;var c=e.isPaused;a.css({overflow:'hidden',position:'relative'}).children('ul').css({position:'absolute',margin:0,padding:0}).children('li').css({margin:0,padding:0});a.children('ul').children('li').each(function(){if($(this).height()>b){b=$(this).height()}});a.children('ul').children('li').each(function(){$(this).height(b)});a.height(b*e.showItems);var d=setInterval(function(){moveUp(a,b,c)},e.pause);if(e.mousePause){a.bind("mouseenter",function(){c=true}).bind("mouseleave",function(){c=false})}})}})(jQuery);
    //]]>
    </script>
    <script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js'></script&gt;

    <script style='text/javascript'>

    var numposts = 7;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = false;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = false;
    var numchars = 100;

    $(document).ready(function () {$('#sai').vTicker();});
    </script>
    <div id="sai">
    <script src='http://www.qawlma3rof.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script&gt;
    </div>

  8. @Warlock
    Firstly there are multiple jQuery library in your blog, remove any one of them and then try this code:

    <script>jQuery.noConflict();</script>

    <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 style='text/javascript'>
    //<![CDATA[
    (function($){$.fn.vTicker=function(e){var f={speed:700,pause:5000,showItems:3,animation:'',mousePause:true,isPaused:false};var e=$.extend(f,e);moveUp=function(a,b,c){if(c)return;var d=a.children('ul');first=d.children('li:first').clone(true);d.animate({top:'-=' b 'px'},e.speed,function(){$(this).children('li:first').remove();$(this).css('top','0px')});if(e.animation=='fade'){d.children('li:first').fadeOut(e.speed);d.children('li:last').hide().fadeIn(e.speed)}first.appendTo(d)};return this.each(function(){var a=$(this);var b=0;var c=e.isPaused;a.css({overflow:'hidden',position:'relative'}).children('ul').css({position:'absolute',margin:0,padding:0}).children('li').css({margin:0,padding:0});a.children('ul').children('li').each(function(){if($(this).height()>b){b=$(this).height()}});a.children('ul').children('li').each(function(){$(this).height(b)});a.height(b*e.showItems);var d=setInterval(function(){moveUp(a,b,c)},e.pause);if(e.mousePause){a.bind("mouseenter",function(){c=true}).bind("mouseleave",function(){c=false})}})}})(jQuery);
    //]]>
    </script>
    <script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js'></script&gt;

    <script style='text/javascript'>

    var numposts = 10;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = false;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = false;
    var numchars = 100;
    </script>

    <div id="sai">
    <script src='http://www.hackmantra.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script></div&gt;
    <script style='text/javascript'>
    $(document).ready(function () {$('#sai').vTicker();});
    </script>

  9. I can't figure out where to change the speed. I understand what you mean about how to, but in the code you provided at the top, I see nowhere where it says anything about it. You said to change it in Line 7, but Line 7 is shotpostthumbnails = true; Thanks…

  10. Is there a way to remove the thumbnail images? I have converted it to show scrolling display of recent comments but want to remove the 'No Image' thumbnail that appears by each line.

    Thanks for a great script though!

  11. If you use jQuery.noConflict then you will need to change $ to jQuery in the two locations at the end:

    <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>
    02
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script&gt;
    <script style='text/javascript' src="http://stylifyyourblog1.googlecode.com/svn/trunk/recentpostticker.js&quot; ></script>
    <script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js'></script&gt;
    <script style='text/javascript'>
    jQuery.noConflict();
    var numposts = 7;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = false;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = false;
    var numchars = 100;
    jQuery(document).ready(function () {jQuery('#sai').vTicker({
    speed: 500,
    pause: 3000,
    showItems: 3,
    animation: 'fade',
    mousePause: false,
    height: 0,
    direction: 'up'
    });});
    </script>
    <div id="sai">
    <script src='http://www.YourBlogURL.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script&gt;
    </div>

    or

    <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>
    02
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script&gt;
    <script style='text/javascript' src="http://stylifyyourblog1.googlecode.com/svn/trunk/recentpostticker.js&quot; ></script>
    <script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js'></script&gt;
    <script style='text/javascript'>
    jQuery.noConflict();
    var $_=jQuery;
    var numposts = 7;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = false;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = false;
    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.YourBlogURL.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script&gt;
    </div>

    This should solve any conflicts, the jQuery.noConflict just changes $ to jQuery so if you added that to the script it should not ever work unless you do the other unstated change.

  12. numposts : total number of post. let it is 15
    showitems: no of post to show. let it is 5……….
    presently ur script scrolling a single new post to the current view…but i want to know, is there any way to bring the next 5(i.e.6-10) post to the view replacing current 5(i.e.1-5) post……., then he next 5(i.e.11-15) post to the view replacing current 5(i.e.6-10) post………..

    Thanks for the script….

  13. Help!
    when I try to insert your instructed code in my blogger template (in HTML mode)and save it; an errors shows like this-
    "Error parsing XML, line 3229, column 90: The reference to entity "alt" must end with the ';' delimiter."

    I am trying to insert the code in HTML mode of my template in my desired location not by pasting the code in Gadget.
    Please suggest how to correct it.

    1. ooops.! i am almost new to blogger and dont know how to remove jquerry library, would u help me to remove jquerry library? will it not effect the performance of the template or gadgets?
      if it seems tedious task for you, than pleae reply here so that i could remove the gadget.
      and thanks so far!

  14. Hi Prayag,

    I am sorry to inform you that it is not working templates provided by blogger and works fine in custom blogger template also works in HTML Editor.I am not getting the exact problem.Can you help??????

    1. Actually I have shared your gadget on my blog with giving all credits to you.Check out this post

      http://www.helperblogger.com/2012/02/scrollingticker-recent-post-gadget-for_26.html

      but many of my readers told me that it is not working so when I checked it was working on custom blogger template but not working on default blogger template.For the demo purpose I have added it to my demo blog.Check this out.Note-I have entered helperblogger's fees address in gadget.

      http://hb-demo04.blogspot.in/

    2. Hi there I checked the Demo blog , the main problem is the existence of two jQuery libraries as well as the ColorBox script. Remove the extra library and the colorBox script and then it will will surely work

    3. As suggested in the end of the post , you can use many jQuery plugins together by including the following code after the gadget

      <script type='text/javascript'>
      jQuery.noConflict();
      </script>

    1. Do the following changes ,

      Change the Line 2-5 of the code with the following


      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script&gt;
      <script type="text/javascript" src="http://stylifyyourblog1.googlecode.com/svn/trunk/recentpostticker.js&quot; ></script>
      <script type="text/javascript" src='http://tavristasos.googlecode.com/svn-history/r100/trunk/recentpostswiththumbnailsv3.js'></script&gt;
      <script type="text/javascript">

  15. Hello,

    Nice gadget! I just tried it and seems to work. Any way to change default "No Image" thumbnail?

    Thanks and keep up the good work!

  16. Hi again,

    I think I talked too fast 😛 Line #2 'kills' Featured Posts/Slideshow of my template and without that line, there is no scroll.

    Blog is still under construction so I'm trying things here and there. You think is possible to use this widget without get Slideshow corrupted?

    http://www.poker-runner.com/

    Thanks in advance

    1. Hi

      Firstly to change the default image you will have to change the script in Line 4 of step 4 ( The image URL is http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png , just change it with another Image )

      The problem of the Slider not working is because of presence of two jQuery libraries in your template , Remove the Line 2 of this code and a also use the noConflict option if the problem persists ( noConflict option is explained in the end of the post )

    2. Hi

      Since I already got several widgets installed, I decided to do a fast test with same template but fresh and empty.

      http://test0101010.blogspot.com.es/

      Same problem, if autoscroll works then Slider is corrupted and if I remove line 2 and/or add noConflict code, then Slider is fine but no autoscroll.

      I really like your widget but I want to keep the slider. In worst case scenario if you can't find a way to make it work, maybe I could remove default template Slider and try to add another. I'd prefer to fix it and keep Slider like now, but if we can't find a solution, do you know a smilidar Slide/Featured Posts compatible with your widget?

      Thanks and sorry to bother your again 😛

  17. I am in search of some recent post widget with thumbnails horizontally but I also like this style which is might be seo friendly in customization of my blog

  18. Hi I need the same thing but for random posts and not recent. Is there anything that can be added, modified or replaced in the existing script to make this happen?

  19. I really like this feature but a problem has arisen. When I first go to my blog I get a pop-up that requests a username and password for the Google Subversion Repository Directory. Any ideas on how to handle this are appreciated. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *