I received an excellent suggestion from Bree at Coffee Bean Bookshelf for a tutorial: how to make a marquee scrolling sidebar widget for images (also works for text). It’s a lot easier than you think!
Here is the general code, which you can paste into any widget:
<marquee behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();">Text or images go here!</marquee>
And here’s an example of how it looks:
Notice how it pauses if you put your mouse over it! That makes it easier for people to view the images and click on them if they want.
You can also change the direction of the scroll by adding a bit more text to the tag:
<marquee behavior="scroll" direction="down" onmouseover="this.stop();" onmouseout="this.start();"> <a href="https://www.nosegraze.com"><img src="https://www.nosegraze.com/wp-content/uploads/2012/10/booknook.jpg" alt="BookNook" /></a> <a href="https://www.nosegraze.com/ultimate-book-blogger-plugin-for-wordpress/"><img src="https://www.nosegraze.com/wp-content/uploads/2020/02/ultimate-book-blogger-plugin-button.jpg" alt="Ultimate Book Blogger Plugin" /></a> </marquee>
(This time I also included the code for the images in case you don’t know how to do that.)
The key difference here is that I added direction="down". You can add any of the main directions you like (up, down, left, right).
And that would look like this:
Great tip! It’s been so long since I’ve gotten to do much web design, I’d forgotten about this marquee tag. I think I might use this in the future. Thanks! 🙂
Can this work on Blogger?? This is so cool.
Yep it can work on any blog platform or website!
Thanks for writing this one up! It saves SO much space on my sidebar having this for my links!
Thankyou! I’ve been looking for this a while. xD
Can you make it scroll slower?
Yep! Just change the marquee to something like this:
<marquee behavior=”scroll” direction=”down” onmouseover=”this.stop();” onmouseout=”this.start();” scrollamount=”1″>
Notice the “scrollamount” bit on the end. You can edit that number to whatever you want. The higher the number, the faster it will go.
Thankyou!
Hi. Tried the scrollamount with the number but it didn’t work. It was already set to one. Negative numbers or even high positive numbers don’t change the speed. How else can I get the scroll speed to slow down? thanks.
All these codes don’t work with WordPress.com
Do you have any possible suggestions?
Sorry but WordPress.com doesn’t allow users to input JavaScript, and this function uses JavaScript.
Is there any way to fix one size for scrolling, Why because one image is big and one is small its not in one fixed size, Can you help me on that
I recommend just uploading images that are the same size. But you can also add
width="100" height="100"(or whatever numbers you want) to the image tags.Example: