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

Written by Prayag Verma


A blogger and Web Developer currently in college learning about computers. A CSS Lover , Blogger Template Designer and Music Addict ! Get more from Prayag on and Twitter




Want to get these Updates straight to your Inbox , Then Subscribe !




Related Articles


134 comments:

  1. I think Scrolling Gadget will slow down the loading for low speed internet users.

    ReplyDelete
  2. @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.

    ReplyDelete
    Replies
    1. bro not working in my blog... pixelwap.blogspot.com

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

      Delete
  3. hi prayag i have seen this JS script i wana costomise it will nice topic
    http://www.ragingcmyk.com/2011/03/random-web-banners-with-iframe-rotator.html
    this is what it is and i want it to be like 1 iframe then 2 and 3, 4 , 5 then again 1 loop
    but i m not a java cook i have only java expert available, U r the one

    (i wnat it in series like 1,2,3,4 the loop from 1) i dont want it (Random)

    ReplyDelete
  4. @Up
    I wanted to know that will you also want a sliding option in the iframe rotator that is ,the previous ,next button

    ReplyDelete
    Replies
    1. benimde sorunum bu bana da yardımcı olabilir misiniz?
      oyun oyna01

      Delete
  5. no brother i want just make it series
    when i refresh 1 iframe refresh 2 iframe refresh 3 iframe and loop again from 1

    ReplyDelete
  6. 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/";
    pages[1]="http://www.htmlforums.com/";
    pages[2]="http://forum.w3schools.com/";

    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/" frameborder="0"></iframe>
    </div>

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

    ReplyDelete
  8. @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

    ReplyDelete
  9. http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/22560

    hi here it is i just want it "sequential" then random

    like multiple content swap

    ReplyDelete
  10. hi hre it is i have implemented on my blog but it is image and random
    http://googleitup.blogspot.com/2011/08/html-var-theimages-new-array-random.html

    ReplyDelete
  11. hi here is another script with cookies
    http://www.dynamicdrive.com/forums/sh
    owthread.php?t=45102

    ReplyDelete
  12. I'd love to use this script. it's just a very slow speed of loading. tealh thanks for sharing this script.

    ReplyDelete
  13. 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!

    ReplyDelete
  14. the no conflict code .. where should I put it ?
    and should I put it even if I delete the jQuery from the main code when it doesn't work ?

    ReplyDelete
  15. @أسامة سعد
    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)

    ReplyDelete
  16. @أسامة سعد

    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>

    <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>
    </div>

    ReplyDelete
  17. @أسامة سعد
    Where u have included jQuery ,change its version from 1.6.1 to 1.5.1

    ReplyDelete
  18. @أسامة سعد
    Found the problem , the following script from www.hscripts.com in your blog


    <script src='http://sites.google.com/site/simoxisite/Home/simo/brps.txt?attredirects=0' type='text/javascript'></script>


    This is injecting jQuery library (1.3.2) into your Blog which is interfering with the working of other jQuery plugins. Delete it

    also if you are not using Colorbox in your Blog then delete it

    ReplyDelete
  19. @Prayag Verma
    I deleted them both the hscscript and colorbox but nothing new .. it's still the same

    ReplyDelete
  20. @Prayag Verma
    Hey mine is not sliding.here is the link www.hackmantra.com (on left side 2nd tab first widget check it)

    ReplyDelete
  21. @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>

    <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>
    <script style='text/javascript'>
    $(document).ready(function () {$('#sai').vTicker();});
    </script>

    ReplyDelete
  22. @Prayag Verma
    Alright but where i have to put that code

    ReplyDelete
  23. Hey will it Work if i add more than two identical Widgets ??
    Which collects New posts from different Sites ??

    ReplyDelete
  24. How about this jquery effect to loading speed PV ?

    ReplyDelete
  25. @Share With Irfan

    As I Said in 2nd Comment of this post, it will not gravely effect the loading times , just a difference of 2-3 seconds , and further more if you have already included jQuery into your blog, then the load times would be effected the least

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

    ReplyDelete
  27. @Tim Forsyth II
    Sorry , changed the post accordingly , this is what happened : Moved the JavaScript from Inline to Google Code,so you couldn't see the parameters , but now have externalized the parameters, so you can easily modify them

    ReplyDelete
  28. Ok, when then I've no idea where you posted the updated version? Any help is appreciated.

    ReplyDelete
  29. @Tim Forsyth II
    I have added the speed and pause things, and also fixed the Line nummbers of Code

    ReplyDelete
  30. Could you make a "related post with thumbnail" like this? I want to put it at sidebar instead of below post..

    ReplyDelete
  31. @AnonymousHi Prayag Verma, I found that you're using the my old code for thread comment system that's shared by some blogs.

    Please install the latest version from my official blog: http://www.bloggeritems.com/2011/12/thread-comment-system-for-blogger.html

    After that, you will free to customize everything.

    ReplyDelete
  32. Hi, just want to ask how do you change the italic text on the post summary. I just want it to be a normal text

    ReplyDelete
  33. @TheMovieIndexAdd the following CSS

    .recent_posts_with_thumbs {font-style:normal !important;}

    ReplyDelete
  34. 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!

    ReplyDelete
  35. @Worcester Park Are you using showpostthumbnails attribute in your script, just set it to false to make it thumbnail free

    ReplyDelete
  36. it works perfect in my web site, by when it loads it show all the posts and after that it start to work normally, so I don't want it.

    ReplyDelete
    Replies
    1. I will try to improve that in the next version

      Delete
  37. Thanks.. it is worked on my blog.. ^_^
    the4crack.blogspot.com

    ReplyDelete
  38. Thanks for a great script though................/////////////////

    ReplyDelete
  39. 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>
    <script style='text/javascript' src="http://stylifyyourblog1.googlecode.com/svn/trunk/recentpostticker.js" ></script>
    <script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js'></script>
    <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>
    </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>
    <script style='text/javascript' src="http://stylifyyourblog1.googlecode.com/svn/trunk/recentpostticker.js" ></script>
    <script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js'></script>
    <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>
    </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.

    ReplyDelete
  40. Please make the same widget for popular post..

    ReplyDelete
  41. WoW amazing ticker but why you have not apply it on your own blog. Is it heavy or some thin else.

    ReplyDelete
    Replies
    1. There is no apparent reason related to performance. I will put it up in this blog to..

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

    ReplyDelete
    Replies
    1. There is a height option present in the code (Line 20 of Step 4). But while testing it , there are no effects in scrolling. I suppose it will be not possible with this plugin

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

    ReplyDelete
    Replies
    1. The & sign is not escaped ,the following changes are required in the code

      ... published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs ...

      Delete
    2. Thanks, I managed to solve the issue. It's working now. Thank you one more time for this great script.

      Delete
  44. yeah cool..
    but i also have this widget but only different pictures and font. :D
    if you share the picture in right but my mine in right. ^^
    thanks for your article bro.

    ReplyDelete
  45. This comment has been removed by a blog administrator.

    ReplyDelete
  46. it seems very nice, but does not work on my blog, have a look http://green-tv.blogspot.com

    ReplyDelete
    Replies
    1. I am unable to find this widget on your blog..

      Delete
    2. this gadgetis still there, just go to the url give above and click on any post, u will see the gadget in top right side with the name "all channels"

      Delete
    3. You have included the jQuery library 4 times in your blog. Firstly make it to only 1 and then we will see which plugin is conflicting with it.

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

      Delete
    5. You are using a lot of jQuery plugins. Removing it isn't difficult but if you don't want to change the coding a lot , then i suggest you mail me the template and I can fix it for you

      Delete
    6. thanks a lot, this would be a great idea, i have mail u at prayag.verma@gmail.com. thanks a lot once again.

      Delete
    7. m still waiting for your response :(

      Delete
  47. Hai Prayang how to make the picture show right not on the left?

    ReplyDelete
    Replies
    1. In the CSS in Line 1 change the float:left property to float:right for .recent_posts_with_thumbs

      You can see how it looks in the Demo, I have changed it to right floating property

      Delete
  48. Thanks.... ^_^ but i have another question, how to make the recent post marque

    ReplyDelete
    Replies
    1. This post by Way2Blogging will be helpful in that matter

      Delete
    2. Thanks again, but i have last question if i make direction: 'up' to direction: 'down' it will be scrolling down right?

      Delete
    3. It should be that way, but the option is not working correctly

      Delete
  49. Hey prgya, i like your instructional tutorials bot blogger, good work :D

    ReplyDelete
  50. Thanks for the info. Just what I was looking for.

    ReplyDelete
  51. This comment has been removed by a blog administrator.

    ReplyDelete
  52. hi previously it's working, but this not working now, check out your demo page .............

    ReplyDelete
    Replies
    1. found the problem : the javascript file http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js not available now.....

      solution: find the recentpostswiththumbnailsv3.js from somewhere and host the file your self on your web server.....

      Delete
  53. Very fantastic widget dude ....thanks for contribution...carry on
    i also use these for my site but i faced one error in this code due to last two line....i request to correct these 26) div for improvement ,,.....thanks

    i use on http://www.technogupshup.com/

    ReplyDelete
    Replies
    1. What is the exact problem with the div .... can you explain a bit

      Delete
  54. hi this is www.technogupshup.com and i see that Nothing to display on this widget and also not a scrolling effect...i think for a better performance to your reader remove/change this post as soon as possible.. so your reader don't believe your site as negative....

    From : www.technogupshup.com

    ReplyDelete
    Replies
    1. Please check again , I can see it working just fine

      Delete
  55. Does the image in the HTML dynamic or is it in a static thumbnail?

    please email me at Contact section at http://saturdayupdate.blogspot.com/

    thanks

    ReplyDelete
    Replies
    1. The thumbnails are pulled from the Feed of the blog via a json request

      Delete
  56. This is too cool man... worked like a charm for me... thanks a lot

    ReplyDelete
  57. Dude Thankx for code \m/

    Btw How to remove bullet....

    ReplyDelete
    Replies
    1. Just add the following CSS

      .sidebar ul li {
      background: transparent !important;
      }

      Delete
  58. Like this gadget but i have jQuery lightbox in my blog
    It not scroll when i remove a Line 2 any idea?

    ReplyDelete
    Replies
    1. I checked your jQuery version ,its 1.2.3 , ,Upgrade to a newer version of jQuery also One thing more , your are using jQuery hosted by yourself , Use the ones provided by Google CDN like http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

      If the problem still doesn't solve , feel free to ask

      Delete
  59. Very good!.
    To download free software visit http://download313.blogspot.com

    ReplyDelete
  60. Thanks it works for me on www.flight-blog.com

    ReplyDelete
  61. 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??????

    ReplyDelete
    Replies
    1. Can you provide the URL of the Blog where you have implemented it, that way I can help you faster

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

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

      Delete
    4. Thanks its worked.Is there any another way to use this gadget.We can't remove our other scripts only because of 1 gadget :(

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

      Delete
    6. Oh thanks master,its my mistake.I didn't read the full post :)

      Delete
  62. Its not working when i use chrome..plz help

    ReplyDelete
    Replies
    1. i have solved the problem...some other script was conflicting....

      Delete
  63. Great Post. I have it working in Chrome and Firefox, but for the life of me it will not scroll in IE8 or IE9. Any suggestions would be greatly appreciated. Thank You

    ReplyDelete
    Replies
    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>
      <script type="text/javascript" src="http://stylifyyourblog1.googlecode.com/svn/trunk/recentpostticker.js" ></script>
      <script type="text/javascript" src='http://tavristasos.googlecode.com/svn-history/r100/trunk/recentpostswiththumbnailsv3.js'></script>
      <script type="text/javascript">

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

    ReplyDelete
  65. Hi again,

    I think I talked too fast :P 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

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

      Delete
    2. Hi

      Thanks for fast reply. I already tried that (I did it again now) and then Slider is fine but there is no scroll on your widget.

      Delete
    3. 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 :P

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

    ReplyDelete
  67. Clear tutorial.. thanks for sharing.

    ReplyDelete
  68. i'v successfully attached widget on my blog. but i can't see images. solve it as soon as.

    ReplyDelete
  69. i doesn't scroll, i have tried conflict code but cant able to fix it,and i don't know how to remove jquery library.Sir please help me out from this problem

    ReplyDelete
  70. ASmazing work man like this . :) i was searching for an article to make my sidebar code sticky using jquery im ib logger please help if you can

    ReplyDelete
  71. im sorry but the slider didn't work when i add this gadget help pleaze

    ReplyDelete
  72. A very usefull tutorial and gaztet, thanks for it.
    But how can I make to open in a new tab the links?

    ReplyDelete
  73. 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?

    ReplyDelete
  74. 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!

    ReplyDelete
  75. dosnt work

    theres no animation

    also makes site slow and pop up with user and password

    ReplyDelete
  76. I'd like to know if the code is still working,please do let me know id it is, as I want to try it on my blog as well. thanks in advance

    ReplyDelete
    Replies
    1. It doesn't work but u can try just backup your template if it didn't work for u then u can just load ur backed up template

      Delete
  77. Hi,
    I have problem with the recent post with your code in it..http://stylifyyourblog1.googlecode.com/svn/trunk/recentpostticker.js

    When i open my blog with firefox browser.. it asking me for password..why??

    Is your code not working now with google..

    ReplyDelete
    Replies
    1. Exactly the same issue. Would love to use this script, but consistently encountering the password issue. Please advise if resolved.

      Delete
  78. http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/22560/random-images-on-refresh

    Please look this page right hand side widget named related articles. When we scroll page to bottom the widget go down to bottom with scrolling. Can you please provide this tutorial. Its amazing. Please

    ReplyDelete