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.
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 |
|---|
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 1LINE OR IMAGE 2LINE OR IMAGE 3LINE OR IMAGE 4LINE OR IMAGE 5ETC.
</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:
114 comments:
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.
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>
How do I delete a space that shows up b/t some of the links??? TIA!
http://www.childresshousehold.blogspot.com
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)...
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!
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 ?
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. :)
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
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!
good to hear that ! :)
i cant get the links to work..
Which one are you talking about?
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 :)
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
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
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
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
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
oooo!!!! TY DIVYA!!!!! here's my email
craker555@hotmail.com or craker_lo@hotmail.com
ty divya ty!!!
so u're done yet? i can wait jz scare u 4gt
-CrakerLo-
when ur done? and i duno ur email oso
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?
erm... sure, write a post then, i din do those myself b4, ty divya
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.
If I want to add link to my image... ?
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...
jy divya~ im waiting and thx for ur help~
lol slow man = =" the post too long?
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 !
ok, nevermind, i know u're busy now, take some time, i can wait.
ty
goood luck
I'm so excited! It worked great! Thanks a BUNCH!
I am glad, that it worked for you...
subscribe 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!
thank you been looking at how blogs do that as I am new :)
:)
@ 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 :)
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.
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
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?
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
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?
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
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)
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
thx
Hi this is nice blog. Good imformation about the scrolling bar with code.
moviesdrum.blogspot.com
backlink please
Thx for this, it works great. Just what i've been looking for.
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...!!
@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"
Thanks............
Download free full software from (http://gold-down.blogspot.com)
welcome to my blog
sumitsrj
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???
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
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
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
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?
This code was so easy to use! Thanks!
Thank you so much I have been searching for weeks to figure this out. You Rock!!
HEllo... In the Horizontal marquee can we put the title beneath the image?
is there a way to control the speed of the horizontal marquee?/ i want mine to slow down a little
@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
great..i already insert this code to my blog..but why title of the image can't be show?
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 :)
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.
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!
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.
Finally - a scrolling banner box code that actually worked so easily on my blog!! Thank you so much!! :-*
its works on my blog. only one problem i faced is that while loading it overflows beneath.
sir,
i 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/
Thanks
For vertical scrolling, wherever you want a line-break add this code: <br/>
like this:
...
...
LINE 1<br/>
LINE 2<br/>
...
...
Thanks so much. It works perfectly. And thanks for the fast response.
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 :)
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
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
well, is it possible to use this widget to contain banners?? i think it'll look prettier on this auto-scrolling widget??
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/
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.
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?
Hey Kari,
The widget is working properly, hope you fixed it yourself :)
Thank you wow, I was looking widgets like this for long long time.
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
Thanks for your Informations...
It is really usefull code
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)
Thank you for this tip. It actually worked on the very first try. Nice!
THANKS
U 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
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?
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. :)
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 :)
@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.
Thanks this match perfectly, ecxellent way to xplain!
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
:)) ;)) :(( :X =)) ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( ~x( =)) =)) =)) =)) =)) =)) =)) =)) =))
I use this code to making different text on my home page... very useful for me.
http://zakgamer2.blogspot.com/
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
Nice tips,thanks for sharing
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/
you got me man.............. i've look every where for this and i've got it from yours... thnx a lot
Thanks a lot for the post. helped me in putting a slider. have been searching for the code for a long time.
can u please put that image in a player so that we could rewind and pause it?
sorry i mean text not image
[:P]
Very well done!
I 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
;;)
btw 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?
Thanks!
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????
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?
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
thankzzzzzzzzz buddy
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!
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