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=""></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 = false;
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>

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 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:


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'>

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

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Mani said...

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

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.

Up said...

hi prayag i have seen this JS script i wana costomise it will nice topic
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)

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

Up said...

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

Its a little different

<style type="text/css">
#container {
margin:50px auto;
#frame {

<script type="text/javascript">

var pages=new Arrayundefined);

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

function pageChangeundefined) {
ifundefinedi==pages.length) {


<div id="container">
<iframe id="frame" src="" frameborder="0"></iframe>

Up said...

hey nice one
but i want change in


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

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

Up said...

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

like multiple content swap

Up said...

hi hre it is i have implemented on my blog but it is image and random

Up said...

hi here is another script with cookies

yadi said...

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

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!

Unknown said...

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 ?

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

Unknown said...

@Prayag Verma
it's not working :\

@أسامة سعد

Try this code

<script type='text/javascript'>
<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'>
(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','0p…

Unknown said...

@Prayag Verma
still doesn't work

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

Unknown said...

@Prayag Verma
nothing yet

@أسامة سعد
Found the problem , the following script from in your blog

<script src='' 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

Unknown said...

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

@أسامة سعد
Now remove no-conflict code from the gadget

Warlock said...

@Prayag Verma
Hey mine is not is the link (on left side 2nd tab first widget check it)

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


<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'>
(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…

Warlock said...

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

In the HTML/JavaScript Gadget

Sidharth said...

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

How about this jquery effect to loading speed PV ?

@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

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

@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

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

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


Unknown said...

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

I would try that ,thanks for the idea

@Prayag Verma test comment threaded...

Navneet said...

@Ф дфѕдғфдғ Фtesting

Anonymous said...

@Navneet Pandeytesting reply

@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:

After that, you will free to customize everything.

@Tien NguyenThanks

Good work. Thanks.

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

@TheMovieIndexAdd the following CSS

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

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!

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

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.

I will try to improve that in the next version

Anonymous said...

Thanks.. it is worked on my blog.. ^_^

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

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>
<script src=""></script>
<script style='text/javascript' src="" ></script>
<script style='text/javascript' src=''></script>
<script style='text/javascript'>

Thanks for pointing out, will do that

Fahad said...

Please make the same widget for popular post..

I will try making one...

Mohsin Ali said...

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

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

hotnwildxx said...

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

Anonymous said...

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.

The & sign is not escaped ,the following changes are required in the code

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

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

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.

This comment has been removed by a blog administrator.
Unknown said...

it seems very nice, but does not work on my blog, have a look

Anonymous said...

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

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

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

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

I am unable to find this widget on your blog..

This post by Way2Blogging will be helpful in that matter

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

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

Unknown said...

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"

DK Mishra said...

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

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.

Unknown said...

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!

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

Unknown said...

thanks a lot, this would be a great idea, i have mail u at thanks a lot once again.

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

Unknown said...

m still waiting for your response :(

KBI said...
This comment has been removed by a blog administrator.
Anonymous said...

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

hotnwildxx said...

found the problem : the javascript file not available now.....

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

Mailed you the fixed template

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

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

hi this is 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 :

Please check again , I can see it working just fine

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

please email me at Contact section at


Unknown said...

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

Thanks for appreciating :)

Unknown said...

Dude Thankx for code \m/

Btw How to remove bullet....

Anonymous said...

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

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

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

Just add the following CSS

.sidebar ul li {
background: transparent !important;

The thumbnails are pulled from the Feed of the blog via a json request

Anonymous said...

Very good!.
To download free software visit

Thanks it works for me on

Rahul said...

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

Chetan said...

Its not working when i use chrome..plz help

i have solved the problem...some other script was conflicting....

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

Rahul said...

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

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.

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

Rahul said...

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

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'>

Rahul said...

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

Anonymous said...

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

Do the following changes ,

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

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="" ></script>
<script type="text/javascript" src=''></script>
<script type="text/javascript">

Hades said...


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!

Hades said...

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?

Thanks in advance


Firstly to change the default image you will have to change the script in Line 4 of step 4 ( The image URL is , 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 )

Hades said...


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.

Hades said...


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

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

Qamar said...

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

Lighthouse said...

Clear tutorial.. thanks for sharing.

Unknown said...

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

Unknown said...

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

Anonymous said...

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

Anonymous said...

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


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

Anonymous said...

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?

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!

kawsar said...

dosnt work

theres no animation

also makes site slow and pop up with user and password

Unknown said...

ben buna katılmıyorum...
hayatın renkleri

Unknown said...

benimde sorunum bu bana da yardımcı olabilir misiniz?
oyun oyna01

Unknown said...

yukarı koy.olacak..
sanattarihi ve arkeoloji

Anonymous said...

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

kawsar said...

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

Anonymous said...

I have problem with the recent post with your code in it..

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

Is your code not working now with google..

Unknown said...

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

Unknown said...

bro not working in my blog...

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

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

sasa said...

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