December 29, 2008

Auto-Scrolling [Text Or Image Slide Shows] Widgets For BlogSpot / Blogger Blogs


In case you have a lot of links in your blog's BlogRoll, or if you want to show all your favorite books list, but have limited space in the sidebar the this widget will be a great help for you !

You can put as many links/ listed items as you want in this widget, they will scrolling automatically unless the visitors hovers the mouse cursor on the widget, and as long as the cursor is placed on over the widget, the scrolling will be paused, and it will only resume after removing the mouse-cursor from the widget.

It will be displayed like this:
BlogRoll

LINE OR IMAGE 1
LINE OR IMAGE 2
LINE OR IMAGE 3
LINE OR IMAGE 4
LINE OR IMAGE 5
ETC.


Here's the simple procedure of adding the widget to your blog:
Log in to Blogger
Go to Layout section, and click on "Add a Gadget", select as "HTML/JavaScript"

Now this is the format to enter the content in to the widget:
<div class="textwidget"><marquee direction="up" width="105" onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()" height="200" align="left">
LINE OR IMAGE 1
LINE OR IMAGE 2
LINE OR IMAGE 3
LINE OR IMAGE 4
LINE OR IMAGE 5
ETC.
</marquee></div>

NOTE: You can adjust or modify the colored content, so as to suit your choice or blog.

And You can put some linked/unLinked images too:
Featured Posts


Or you can even use a simpler version of this code:
<marquee behavior="scroll"direction="left"><img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" /> <img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" /> <img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" /> <img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" />
</marquee>

And it will be displayed like this:

Next Gen ComputersNext Gen Computers 500GB on a Disk500 GB Disks Amazing Flash DrivesFlash Drives History Of Mobile PhonesMobile Phones


114 comments:

Margot said...

I used your links and the vertical one worked great but the horizontal one isn't working right. I have several lines of scrolling buttons instead of just one. Here is my blog url
http://shelterednotshatteredblogroll.blogspot.com/
I'd appreciate any help you could give. I also linked to you from my Home blog because I had several people asking how I got the scrolling box up.

Divya Sai said...

Hello Margot, when I checked your blog, I found the horizontal banners scrolling in proper manner. If you want to display them inside a box(of fixed length), then use this code:


<table border="1" width="200"><tr>
<td>THE ABOVE CODE FROM THE POST HERE</td>
</tr></table>

Sherrie said...

How do I delete a space that shows up b/t some of the links??? TIA!

http://www.childresshousehold.blogspot.com

Divya Sai said...

Hi Sherrie

Can u explain exactly about which space are you talking about(can u show any example of it, as I am unable to understand your problem)...

Sherrie said...

If you go check out my blog (http://www.childresshouseholdblogspot.com) there are some spaces b/t some of the buttons. For instance, I think there's one above Red Sox Mommy. That's just one. If you watch the scroll, you'll see more. Make sense? TIA!

Divya Sai said...

I couldn't see any text "Red sox mommy", what i could see is a widget with two banners scrolling upwards (with heading praying for harper)... and another widget with heading awards
Can you tell me where exactly is the widget you are talking about ?

Sherrie said...

Sorry, it's the first one that has the "praying for Harper" button. What I'm referring to is that there appears to be spaces between some of the buttons within that scrolling widget. If you watch the widget that has the "praying for Harper" button, you will notice a space (gap) in between some of the buttons (images). For instance, there's a space b/t the "on the Verge" button and the "Red Sox Mommy" button. There's also more spaces if you keep watching. Thanks again. I don't mean to be a bother, but I just don't know how to get rid of the spaces. :)

Divya Sai said...

Ohk....

I checked the source code of your blog, in the widget between the image banners(buttons) you will find these codes:

<br/>

just delete them...that's it
and don't worry you are not bothering me....feel free to ask your queries here...

Regards
Sai

Sherrie said...

Thanks. I'll work on that. Didn't realize it was that simple of a fix! LOL! I finally got my favicon to work in IE! YEAH!

Divya Sai said...

good to hear that ! :)

Felicia F. Ramzi said...

i cant get the links to work..

Divya Sai said...

Which one are you talking about?

nourfadly80 said...

Nice code...but sometimes it doesnt scroll the whole image on it...maybe my pc lagging? or its fine in your view...thanks anyway for the code..now i can simplify things in my blog :)

Divya Sai said...

Hi nourfadly80

We are using "marquees" in this hack, which may have some issues with certain browsers, but that is very rare, although we can use javascripts for this, but that will slow down your blog's loading, and it will not work in PC's without javascripts installed.
So do not worry, I have visited your blog, and found the widget in the perfect working condition....

Regards
Sai

PrissyGreen said...

hi there. I have several more links besides the 2 1/2 that are showing up, at least 10 more. I can't figure out why they aren't all showing up?

do mind offering some assistance? thank you so much in advance!
http://prissygreen.blogspot.com

Divya Sai said...

Hi PrissyGreen,

I visited your blog, and found the widget working exactly as it should be, all the link banners are rolling perfectly, so I think you have done the troubleshooting yourself !
BTW you have a nice blog ! Keep up the good work !

Regards
Sai

CrakerLo said...

erm, how... to make a "only-3-sliding-image, with bigger, show numbers (or not) slide down then go back up and go back down" slide?
like www.grandchase.com.tw or grandchase.ntreev.net tis 2 web are example could u teach me? or if u cnt then nvm

Divya Sai said...

Hi crakerlo,
those are not simple marquee codes, but includes javacsript and css coding too, not very difficult, but will take some time, I can reply you regarding this after 2 days,
can you plz reply here or mail me after 2 days!

Regards
Sai

CrakerLo said...

oooo!!!! TY DIVYA!!!!! here's my email
craker555@hotmail.com or craker_lo@hotmail.com
ty divya ty!!!

CrakerLo said...

so u're done yet? i can wait jz scare u 4gt
-CrakerLo-

CrakerLo said...

when ur done? and i duno ur email oso

Divya Sai said...

If I give you the files, javascript and css, can you do that yourself, or do you want me to write a post regarfing this?

CrakerLo said...

erm... sure, write a post then, i din do those myself b4, ty divya

Divya Sai said...

Ok ,then I'll write a post on this topic and will send you the link. I'll try to do this within next 24hrs.

AB said...

If I want to add link to my image... ?

Divya Sai said...

Hi Ankit,

To link any image, use this code in place of IMAGE 1:

<a href="http://target"><img src="source of image"></a>

and similarly for image2, 3 etc...

CrakerLo said...

jy divya~ im waiting and thx for ur help~

CrakerLo said...

lol slow man = =" the post too long?

Divya Sai said...

Dude, I'm sorry, unable to get some time to write that tut, anyways I'll try to do that ASAP, i'll send you the link as soon as i write it !

CrakerLo said...

ok, nevermind, i know u're busy now, take some time, i can wait.

ty
goood luck

Rachel @ Surviving The Stores said...

I'm so excited! It worked great! Thanks a BUNCH!

Divya Sai said...

I am glad, that it worked for you...
subscribe or keep visiting this blog for more such hacks :)

Regards
Sai

Mohammad Mustafa Ahmedzai said...

Dsai, I tried adding the first code given above but even that didn't work. I guess something is missing from my template that can activate this text scrolling. Plz help bro!

Nichol said...

thank you been looking at how blogs do that as I am new :)

bloggerstop.net said...

:)

Divya Sai said...

@ Mohammad and anyone, who is facing problem in this widget,

Soon there'll be a tutorial on making slide-shows, which will be much better than this method....so cheer up :)

A Cheap Chick said...

I've only been blogging for a little over a month but it seems like I've been looking for this code FOREVER! Who knew it was this simple? Thank you so much!

I link back to great blog resources, I have added your site.

Divya Sai said...

Thanks for link back mam...being a blogger a link backs is the best gift I could get :)
(of course other than 2 words of appreciation too)
BTW, the header image you are using is really cool !

Thanks for visiting....
I hope you'll find this page interesting too:
http://bloggerstop.net/2008/09/blogger-help.html

Regards
Sai

TlC said...

I was so excited to find you.
I am trying to add the horizontal slider but my images don't appear. What do I type in place of the code for the image src - path to yourimage? for the image size as well.
http://triciacohn.blogspot.com

my images are in flickr which is what i typed but the image didn't appear?

Divya Sai said...

Hello,

If you want to shows pics from filkr, then why don't you directly do it from the widget already given by Blogger.
Click on "add a Gadget" and select "Slideshow" and then select Flickr in the drop down menu, and finally giv your ID to it !
That's it

Regards
Sai

TlC said...

Hi, I want to add an image slider instead of the flickr widget which I do currently have but don't like. I want something that moves like the one you have above. Just can't figure out how to link my images?

Divya Sai said...

ohkk....

If you want to place the widget similar to the one I have, then you may read these posts:

Slide Show 1Slide Show 2And to upload the images, use imageshack.us (and ONLY use DIRECT LINKS to the images)

Regards
Sai

abraham vivian said...

Do Like this and see the difference ;))

above code div section plus change ( ) to < >

(table width="100%" cellspacing="1")
(tr)(td)
Line1 or image 1
(tr)(td)
Line2 or image 2
(tr)(td)
Line2 or image 2
(/td)(/tr)
(/table)

Divya Sai said...

Hi Abraham,
Thanks for the comment and advice, actually in the above examples both "blogroll" and "featured posts" widgets are inside the table.

Basically you need to add this code (scrolling code) inside a table, like this:

<table>
<tr>
<th>HEADING</th>
</tr>
<tr><td>
SCROLLING CODE HERE</td></tr>
</table>

That's it

Regards
Sai

Hariman said...

thx

moviesonline said...

Hi this is nice blog. Good imformation about the scrolling bar with code.
moviesdrum.blogspot.com

abimanyu said...

backlink please

L said...

Thx for this, it works great. Just what i've been looking for.

:::Faisal Mahmood::: said...
This comment has been removed by a blog administrator.
CooL VicKy said...

hi divya i want to knw the code of new window or new tab i mean when someone clicks on scrolling posts it shuld get open in new window or tab pls help me n tell me how can i do this? thanx for ur all cool tricks u rocks...!!

Sai @ Blogger Help said...

@Vicky
Instead of linking an image/text like this:
<a href="http://www.google.com"><img src="http://something.jpg"></a>

link it like this:
<a href="http://www.google.com" target="_blank"><img src="http://something.jpg"></a>

Notice the target="_blank"

Gold-down said...

Thanks............
Download free full software from (http://gold-down.blogspot.com)
welcome to my blog

sumitsrj

rohan said...

hi dear
pls check the foling blog
http://apurbaworld.blogspot.com/

I think their auto scroling images is better.I think ur autoscroling images are little bit shaky.
so can u pls suggest me the way plsssss???

Divya Sai said...

Marquee is the most simple way of displaying scrolling images. That blog is actually using some javascript+css to display those images in that widget. I do not have the code for the exact widget, but you may have look on these widgets:
http://bloggerstop.net/2009/04/create-image-slideshow-part-1.html
http://bloggerstop.net/2009/04/create-image-slideshow-part-2.html
http://bloggerstop.net/2009/04/create-image-slideshow-part-2_19.html

Cornelius Jr. said...

I liked much of what I saw. However,it seemed a bit more invovled than perhaps my capabilites. I liked the marquee for my intended purposes. Maybe I could get some helpful hints or direction. Thanks
Cm Jr.
www.corneliusonpoint.blogpsot.com

Anonymous said...

Thank you so much for this code! It works great. I've got about 100 images scrolling. I was wondering is there any way to randomize the order of the images?

Thanks

Arin said...

I am using this code for my button sidebar-to scroll the buttons but only the first 3 scroll then it starts over again-how do I fix this?

Katie said...

This code was so easy to use! Thanks!

Nevaeh said...

Thank you so much I have been searching for weeks to figure this out. You Rock!!

WWE PHIL said...

HEllo... In the Horizontal marquee can we put the title beneath the image?

Cliviaalana said...

is there a way to control the speed of the horizontal marquee?/ i want mine to slow down a little

Sai - Blogger Widgets said...

@WWE
Use "Images & Text (Both Scrolling)" code from this page:
http://www.quackit.com/html/codes/html_marquee_code.cfm

@Cliviaalana
Use an additional attribute scrolldelay inside the tags, complete details here:
http://www.htmlcodetutorial.com/_MARQUEE_SCROLLDELAY.html

shigekazu said...

great..i already insert this code to my blog..but why title of the image can't be show?

KIKA said...

Hi, thanks for the code! I'm using it on my blog, however the marque doesn't cross the entire width of my blog. I keep fiddling with the width but it still only cover's 1/3 of the blog. I was wondering if you knew how to fix this, thank you so much!

my blog: thebookbluff.blogspot.com
(It's on the bottom of my blog :)

Divya Sai said...

When in the Edit Layout page, drag the widget further down. Presently it is one of your three bottom widgets (the center one), once you drag it to the bottom-most part of your blog, it will stretch to the entire width of your blog.

KIKA said...

Wow, that was fast! Thanks for your response :) I've been trying to drag it lower but it's the only one on in the bottom middle widget, other than the "Add A Gadget" option on top of it. maybe I should try refreshing my page.

Also, is there a way I can make the widget display the buttons in a single row? instead of 3? Thank you so much!

Divya Sai said...

There's another way to spread the widget across your blog, but first we should display it in a single row as you want.
For that, simply delete the center tags from your widget, viz. two <center> tags and two </center> tags.
Once you do this, I'll tell you how to push the widget to the bottom of your blog.

Brenda said...

Finally - a scrolling banner box code that actually worked so easily on my blog!! Thank you so much!! :-*

prashanth said...

its works on my blog. only one problem i faced is that while loading it overflows beneath.

sudha said...

sir,
i insert the code in my blog. but i'm unable to insert links. pl help.

Artful Musings said...

I'm working on adding your widget to my blog and I want to use lines of text that scroll vertically. How do I keep each line seperate so they don't wrap and run into each other. My blog is http://artfullymusing.blogspot.com/

Thanks

Sai - Blogger Widgets said...

For vertical scrolling, wherever you want a line-break add this code: <br/>

like this:

...
...
LINE 1<br/>
LINE 2<br/>
...
...

Artful Musings said...

Thanks so much. It works perfectly. And thanks for the fast response.

Belly Charms said...

I added the code to 2 widgets and they work perfectly....on Google Chrome, Firefox and Safari. I just had a reader tell me that my buttons are "all over the place" in Internet Explorer. I check my hubby's computer using IE and it is a mess. Do you know how to fix this :)

Artful Musings said...

Hi,

I'm trying to the vertical scrolling working here is the code I used. For some reason it's not working. in the code where it says "http://target" does target get replaced with something? I'm inserting the link to my photo in the img scr= section

Thanks Laura

Artful Musings said...

OK, Ignore my previous post. I'm now getting pictures but they are huge and overlay almost the entire blog and there is no scrolling. Laura

Roy @ La Vita e Bella said...

well, is it possible to use this widget to contain banners?? i think it'll look prettier on this auto-scrolling widget??

Kari Nitzel said...

I am new at this, I have set up the scrolling blog buttons which works fine, however once you click on once of the blogs it will not go to that blog.
What have I done wrong?
http://duchsfearl.blogspot.com/

Sai - Blogger Widgets said...

Hi Kari,

That is because you haven't linked the banners CORRECTLY to any page/blog.

Instead of using the code like this:

<http://mindiandelrey.blogspot.com/><img border="0" src="http://i730.photobucket.com/albums/ww302/jeppdogg/th_Mindismanicbutton-2.gif"/>

USE THIS:

<a href="http://mindiandelrey.blogspot.com"><img border="0" src="http://i730.photobucket.com/albums/ww302/jeppdogg/th_Mindismanicbutton-2.gif"/></a>

Similarly do it for other banners too.

Kari Nitzel said...

Okay, I have fixed all the banners and the links now work, however it is now not scrolling. I have double checked to make sure I didn't delete something by mistake, but nothing is missing. Now what?

Sai - Blogger Help said...

Hey Kari,

The widget is working properly, hope you fixed it yourself :)

movies said...

Thank you wow, I was looking widgets like this for long long time.

Medipally Shiva Krishna said...

Hii Sai Great Features you provide in site thanq u very much i am unable to give linked to the images presently i had removed form my blog if possiable can you add some images urls and can you please mail me to it waiting in your repsonse
shiva krishna
rockshiva007@Gmail.com

indian said...

Thanks for your Informations...

Anonymous said...

It is really usefull code

Pravin Kumar (ADMIN OF MMp365.In) said...

Ur widget works great but besides our Modification, i has modified Second widget shown above and embedded in my website:
www.Mp365.In
U can see my modifications there!

Thnq so much for your effort taken in giving such useful widgets to us...
Regards..,
PRAVIN KUMAR JAY(ADMIN OF Mp365.In)

Lynda A.K.A Jiazy said...

Thank you for this tip. It actually worked on the very first try. Nice!

ALMITERS said...

THANKS
U R AWESOME

Wild C said...

Thanks for this awesome gadget! Is there any way to stop a gap appearing after the last image and before the first so that it scrolls continuously without a break? You can see it in action here: http://www.dialogvisual.com

Green Witch said...

I hope someone still reads this and responds. I have successfully implemented your code to the lower right of my blog at http://paganbydesign.blogspot.com, however, with an Internet Explorer browser, the images just sit there...all of them.

If I move the "img" code up above the url code, then it will scroll in all browsers (even IE), but links to each image do not open.

I'm not very experienced with this. Can you help me so this works in Internet Explorer too?

Green Witch said...

Wild C: I think you would use a Loop command for that but I don't know the exact code. I've looked all over the net for help with my issue and ran across that term. Perhaps you could search for something like: "html code to loop images".

I think it would be something like: loop="infinite"

Try this page: http://www.htmlcodetutorial.com/quicklist.html

Good luck. :)

Wild C said...

Green Witch, I'm amazed it doesn't work in IE, since your links work fine on my iPad!

Thanks for the infinite loop suggestion - will check it out :)

Sai - Blogger Help said...

@Green Witch
First of all..thanks for helping others on this blog :)

In your code, leave a "space" between the different elements of the script code, so instead of using this code:

behavior="scroll"direction="up"width="200"

use this:

behavior="scroll" direction="up" width="200"

Hope this will solve your problem.

quepasagaypr.com said...

Thanks this match perfectly, ecxellent way to xplain!

Tina Peterson said...

Hi - this is an old tut but I'm wondering if you know how to slow down the scroll so it's easier to read the pics? I have the marquee above my posts and under my page names here:
http://familyliteracyandyou.blogspot.com/

This tut was extremely easy to follow. Thanks so much. The only thing I had to do differently was remove the / just after the .jpg or .png code. I'm going to add a button or something to my blogs so others can find you and so I can come back! Tina

Blog Saya said...

:)) ;)) :(( :X =)) ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( =)) =)) =)) =)) =)) =)) =)) =)) =))

Zeshan Ahmed said...

I use this code to making different text on my home page... very useful for me.
http://zakgamer2.blogspot.com/

linedance said...

hi ,

i'm trying to create a blog with showing photo scroll like this website http://ucwdc-europe.com/ by using Marquee but the problem is i want it show without gap . this is my blog http://dancelist.blogspot.com/ hope you help.

This is my email etline77@yahoo.com

Regards
Eddie

Best Deal said...

Nice tips,thanks for sharing

francis said...

Hi Divya, I am a blog dummy. I start blogging in July this year (2011). Recently, I got a big trouble. A post (with slideshow) works properly in chrome (13-0) & netscape (7-2) but fails in IE (8-0) & opera (11-5). The side-bar is swapped automatically from RHS to LHS. And, the slideshow is hiddened. URL is attached on below. Could you as kind as possible to help me fixing the bug. Thanks. Francis
http://hongkongogogo4.blogspot.com/

Anonymous said...

you got me man.............. i've look every where for this and i've got it from yours... thnx a lot

About Aisha said...

Thanks a lot for the post. helped me in putting a slider. have been searching for the code for a long time.

Sebooty said...

can u please put that image in a player so that we could rewind and pause it?

Sebooty said...

sorry i mean text not image

Anonymous said...

[:P]

Tzvi said...

Very well done!
I would like to know, if perhaps you know how to add a background image to the text (going up) scroller?

Anonymous said...

How to include photos @ scroll.. Please inform: thathampallyward@gmail.com Regards 10.10.2011

Ian 'Kasanova' said...

;;)
btw i have follow your blog...
follow me back please...
http://ian-kasanova.blogspot.com
thanks..
;)

Cathy Davis said...

Any idea why this works in browsers other than IE? I am trying to auto scroll "buttons" (basically photos hosted elsewhere with links to click) I have tried so many codes and am getting so frustrated. I am using blogger. Any advice?

Thanks!
Cathy

waqas said...

All of these above sliders are awesome especially the No. 2 image slider is the best for me. Thanks for sharing the image slider. If installed in a post then what will be its code... remains the same or change????

Eric Giri said...

all of ur ideas are great can u plz tell me how can i make vertical auto scrolling banner using embedded banner code and can i reset the height and width of scroll box?

arnold said...

hey friend can you show me how to put a horizontal scrolling widget like in this blog ganool[.]com
i've been searching everywhere but coulnd't find a thing
i'd really appreciate your help

Jignesh Dawda said...

thankzzzzzzzzz buddy

Jason said...

Hello,

Can you show me how to modify the code so it starts and stops similar to the vertical scroll on this page:

http://www.artslant.com/sf/showcases/artshow2?listtype=exhibiting&sublist=San+Francisco

Thanks!

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy