Auto Scrolling - Recent Posts Widget For Blogger/Blogspot Blogs

Updated on 22nd September, 2016: Javascript file has been updated. As the previous link was not working.
Recently I have published a tutorial on how to make an auto scrolling text/image widget. Now if you want to display your recent blog posts in this way either at the top or at the bottom of your blog, then you can use this widget:


To add this widget to your blog, log in to Blogger
Go to Layout -> Add a Gadget -> HTML/JavaScript type, then add this code to it.

<script src="https://sites.google.com/site/bloggerstop1/Home/RecentPostsScrollerv2.js?revision=1">
</script>
<script>
var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175;
var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="»»";
</script>
<script src="http://YOUR_BLOG.BLOGSPOT.COM/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2">
</script>

You can modify the code (variables) according to your requirements, for ex.
in case of "var nScrollDelay", lower the number, higher will be the speed.

First, simply add and test the code without changing anything [of course you have to change the blog address highlighted in RED], then after watching it live on your blog, make further changes :)

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

22 comments

Write comments
January 15, 2009 8:54 PM delete

i try but error
showing undefined undefines on each article tittle, like this

article tittle undefinedundefined article tittle undefinedundefined

Reply
avatar
January 16, 2009 10:30 AM delete

Hi Satya,
Thanks for commenting, yes there was an error, actually titles were being shown correctly, but there was a small error in the code due to which the symbol between titles was not being displayed.
Anyways, it's OK now, u can use this hack !

Regards
Sai

Reply
avatar
January 18, 2009 9:02 PM delete

Thx so much, permission to catch the code, :D

btw credit to bloggerstop.net always shown on my article if i took a code from here .. cheers

Reply
avatar
February 02, 2009 8:09 AM delete

Hi, I have a problem with this code. I replased the red text with the address of my blog, but i'va got an error: "TypeError: objPost is undefined". What could be the problem? 10x in advance!

Reply
avatar
February 02, 2009 8:18 AM delete

Also I don't have any scrolling titles.

Reply
avatar
February 02, 2009 9:18 AM delete

Hi Ivaylo Spasov
I have checked the code in javascript4blogger.blogspot.com, and it's working fine there.

I think as you have only 1 post, so it might be having some problem, implement this code in your blog, once you have posted 10-15 posts !
(In the mean time you can show titles of any other blogger blog, if you have one)

Regards
Sai

Reply
avatar
February 02, 2009 11:21 AM delete

Thank you for the information. I'll try it later when there are more posts in the blog.

Reply
avatar
February 02, 2009 11:40 AM delete

So I have tested the code. It works with more than 13 posts. Under that number there is an error message.

Reply
avatar
February 02, 2009 11:54 AM delete

Thanks a lot for testing that Ivaylo !
This will be very helpful for other bloggers...

Regards
Sai

Reply
avatar
March 08, 2009 11:44 PM delete

how do i change titel color thanks

Reply
avatar
March 09, 2009 12:19 PM delete

Well the titles take the same color as other links on your blog, you can change their background color, by this method:

add any of these (or any color) in the code above instead of var sBgColor;

var sBgColor=gray; or
var sBgColor="pink";etc

Reply
avatar
March 09, 2009 11:55 PM delete

thanks divya your help is very much appriciated thanks again love your blog thanks god bless you..

Reply
avatar
April 10, 2009 10:21 PM delete

Hello Divya,

I have used this widget on all my blogs (total of 6 blogs) and its working fine. Thanks a lot for this widget.

But I wish to show updates of all the blogs in one widget like 5 posts from one blog and 5 posts from other blog. Can u help me on this?

I really like ur blog and its a boon for bloggers like me

May Baba Bless u

Sai Ki Deewani
Hetal Patil

Reply
avatar
April 12, 2009 11:55 PM delete

Hello Hetal,

Of course it is possible to show updates 5 or more blogs, but now the updates will not be shown in a single line, rather in 5 different lines/rows of a table...and I think it will look more meaningful too ;)

Use this Code:

<table border="1"><tr>
<td>CODE_FOR_FIRST_BLOG</td>
</tr></table>
<table border="1"><tr>
<td>CODE_FOR_SECOND_BLOG</td>
</tr></table>
<table border="1"><tr>
<td>CODE_FOR_THIRD_BLOG</td>
</tr></table>
<table border="1"><tr>
<td>CODE_FOR_FOURTH_BLOG</td>
</tr></table>
<table border="1"><tr>
<td>CODE_FOR_FIFTH_BLOG</td>
</tr></table>


Regards
Sai

Reply
avatar
April 25, 2009 10:32 AM delete

Hello Divya,

Thanks for lovely widget.

May Babaji bless u

Sai Ki Deewani
Hetal Patil

Reply
avatar
April 25, 2009 1:25 PM delete

Sai Ram Hetal....

I'm still for your entry at the contest :)


Regards
Sai

Reply
avatar
June 07, 2009 12:28 PM delete This comment has been removed by the author.
avatar
February 21, 2010 8:36 PM delete

Preserving this too for my new blog. Good idea to display the content :)

Reply
avatar
April 24, 2011 11:40 AM delete

nice bro working on my site
govalerts.blogspot.com

check all viewvers

Reply
avatar
July 09, 2011 12:51 PM delete This comment has been removed by the author.
avatar
October 16, 2011 1:59 PM delete

thanks a lot but how to add this widged on blogger classic templates

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon