In case you have a lot of links in your blog's BlogRoll or if you want to show all your favorite books list on the sidebar, but have limited space in it then 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 once the mouse-cursor is removed from the widget.
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 once the mouse-cursor is removed from the widget.
It will be displayed like this:
| BlogRoll |
|---|
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 code to paste 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 change or modify the highlighted code (in RED and BLUE), so as to suit your choice or blog.
You can also use hyperlinking for the images:
| 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:
112 comments
Write commentsI 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
Replyhttp://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.
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:
Reply<table border="1" width="200"><tr>
<td>THE ABOVE CODE FROM THE POST HERE</td>
</tr></table>
How do I delete a space that shows up b/t some of the links??? TIA!
Replyhttp://www.childresshousehold.blogspot.com
Hi Sherrie
ReplyCan 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)...
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!
ReplyI 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
ReplyCan you tell me where exactly is the widget you are talking about ?
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. :)
ReplyOhk....
ReplyI 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
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!
Replygood to hear that ! :)
Replyi cant get the links to work..
ReplyWhich one are you talking about?
ReplyNice 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 :)
ReplyHi nourfadly80
ReplyWe 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
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?
Replydo mind offering some assistance? thank you so much in advance!
http://prissygreen.blogspot.com
Hi PrissyGreen,
ReplyI 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
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?
Replylike www.grandchase.com.tw or grandchase.ntreev.net tis 2 web are example could u teach me? or if u cnt then nvm
Hi crakerlo,
Replythose 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
oooo!!!! TY DIVYA!!!!! here's my email
Replycraker555@hotmail.com or craker_lo@hotmail.com
ty divya ty!!!
so u're done yet? i can wait jz scare u 4gt
Reply-CrakerLo-
when ur done? and i duno ur email oso
ReplyIf I give you the files, javascript and css, can you do that yourself, or do you want me to write a post regarfing this?
Replyerm... sure, write a post then, i din do those myself b4, ty divya
ReplyOk ,then I'll write a post on this topic and will send you the link. I'll try to do this within next 24hrs.
ReplyIf I want to add link to my image... ?
ReplyHi Ankit,
ReplyTo 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...
jy divya~ im waiting and thx for ur help~
Replylol slow man = =" the post too long?
ReplyDude, 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 !
Replyok, nevermind, i know u're busy now, take some time, i can wait.
Replyty
goood luck
I'm so excited! It worked great! Thanks a BUNCH!
ReplyI am glad, that it worked for you...
Replysubscribe or keep visiting this blog for more such hacks :)
Regards
Sai
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!
Replythank you been looking at how blogs do that as I am new :)
Reply@ Mohammad and anyone, who is facing problem in this widget,
ReplySoon there'll be a tutorial on making slide-shows, which will be much better than this method....so cheer up :)
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!
ReplyI link back to great blog resources, I have added your site.
Thanks for link back mam...being a blogger a link backs is the best gift I could get :)
Reply(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
I was so excited to find you.
ReplyI 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?
Hello,
ReplyIf 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
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?
Replyohkk....
ReplyIf 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
Do Like this and see the difference ;))
Replyabove 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)
Hi Abraham,
ReplyThanks 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
thx
ReplyHi this is nice blog. Good imformation about the scrolling bar with code.
Replymoviesdrum.blogspot.com
backlink please
ReplyThx for this, it works great. Just what i've been looking for.
Replyhi 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...!!
Reply@Vicky
ReplyInstead 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"
Thanks............
ReplyDownload free full software from (http://gold-down.blogspot.com)
welcome to my blog
sumitsrj
hi dear
Replypls 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???
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:
Replyhttp://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
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
ReplyCm Jr.
www.corneliusonpoint.blogpsot.com
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?
ReplyThanks
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?
ReplyThis code was so easy to use! Thanks!
ReplyThank you so much I have been searching for weeks to figure this out. You Rock!!
ReplyHEllo... In the Horizontal marquee can we put the title beneath the image?
Replyis there a way to control the speed of the horizontal marquee?/ i want mine to slow down a little
Reply@WWE
ReplyUse "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
great..i already insert this code to my blog..but why title of the image can't be show?
ReplyHi, 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!
Replymy blog: thebookbluff.blogspot.com
(It's on the bottom of my blog :)
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.
ReplyWow, 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.
ReplyAlso, is there a way I can make the widget display the buttons in a single row? instead of 3? Thank you so much!
There's another way to spread the widget across your blog, but first we should display it in a single row as you want.
ReplyFor 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.
Finally - a scrolling banner box code that actually worked so easily on my blog!! Thank you so much!! :-*
Replyits works on my blog. only one problem i faced is that while loading it overflows beneath.
Replysir,
Replyi insert the code in my blog. but i'm unable to insert links. pl help.
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/
ReplyThanks
For vertical scrolling, wherever you want a line-break add this code: <br/>
Replylike this:
...
...
LINE 1<br/>
LINE 2<br/>
...
...
Thanks so much. It works perfectly. And thanks for the fast response.
ReplyI 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 :)
ReplyHi,
ReplyI'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
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
Replywell, is it possible to use this widget to contain banners?? i think it'll look prettier on this auto-scrolling widget??
ReplyI 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.
ReplyWhat have I done wrong?
http://duchsfearl.blogspot.com/
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?
ReplyHey Kari,
ReplyThe widget is working properly, hope you fixed it yourself :)
Thank you wow, I was looking widgets like this for long long time.
ReplyHii 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
Replyshiva krishna
rockshiva007@Gmail.com
Thanks for your Informations...
ReplyIt is really usefull code
ReplyUr widget works great but besides our Modification, i has modified Second widget shown above and embedded in my website:
Replywww.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)
Thank you for this tip. It actually worked on the very first try. Nice!
ReplyTHANKS
ReplyU R AWESOME
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
ReplyI 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.
ReplyIf 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?
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".
ReplyI think it would be something like: loop="infinite"
Try this page: http://www.htmlcodetutorial.com/quicklist.html
Good luck. :)
Green Witch, I'm amazed it doesn't work in IE, since your links work fine on my iPad!
ReplyThanks for the infinite loop suggestion - will check it out :)
@Green Witch
ReplyFirst 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.
Thanks this match perfectly, ecxellent way to xplain!
ReplyHi - 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:
Replyhttp://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
:)) ;)) :(( :X =)) ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( =)) =)) =)) =)) =)) =)) =)) =)) =))
ReplyI use this code to making different text on my home page... very useful for me.
Replyhttp://zakgamer2.blogspot.com/
hi ,
Replyi'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
Nice tips,thanks for sharing
ReplyHi 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
Replyhttp://hongkongogogo4.blogspot.com/
you got me man.............. i've look every where for this and i've got it from yours... thnx a lot
ReplyThanks a lot for the post. helped me in putting a slider. have been searching for the code for a long time.
Replycan u please put that image in a player so that we could rewind and pause it?
Replysorry i mean text not image
Reply[:P]
ReplyVery well done!
ReplyI would like to know, if perhaps you know how to add a background image to the text (going up) scroller?
How to include photos @ scroll.. Please inform: thathampallyward@gmail.com Regards 10.10.2011
Reply;;)
Replybtw i have follow your blog...
follow me back please...
http://ian-kasanova.blogspot.com
thanks..
;)
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?
ReplyThanks!
Cathy
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????
Replyall 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?
Replyhey friend can you show me how to put a horizontal scrolling widget like in this blog ganool[.]com
Replyi've been searching everywhere but coulnd't find a thing
i'd really appreciate your help
thankzzzzzzzzz buddy
ReplyHello,
ReplyCan 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!
Comments are moderated on this blog
Allowed HTML tags: <b>, <i> and <a>
Comment Like This! and Optimize your blog EmoticonEmoticon