Today someone on Blogger Help Group asked how to add a scrolling image marquee to their blog. Creating a scrolling marquee is easy. The images can move across the screen horizontally or vertically. You can place a scrolling image marquee either in your header, footer, sidebar, or blog post like I have done here.
To add it to your sidebar in Blogger Go to Template – Page Elements – Add a Page Element, and select HTML/JavaScript to add the marquee code.
This Marquee would scroll 4 images.
<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>
You can control whether it starts left or right just by changing the direction of the scroll from left to right.
direction=
- left (scrolls left to right)
- right (scrolls right to left)
- up (scrolls up)
- down (scrolls down)
To create a vertically scrolling marquee, add a <br> between each image.
EX: <img src=”http://path_to_your_image.jpg” alt=”Title of image” height=”Height of image” width=”Width of image” /><br>
<img src=”path_to_your_image.jpg” alt=”Title of image” height=”Height of image” width=”Width of image” />
Wasn’t that simple? Please note that browsers like Mozilla Firefox may not display the marquee correctly and the ‘marquee’ element is not correct HTML, therefore W3 will not validate it.
If you liked this post, why not buy me a coffee?
RSS
12 responses so far ↓
Wrote: Nov 11, 2007 at 7:45 pm
Mom:mrgreen:,
How cool I love the pictures, they look familiar:!:
Wrote: Nov 11, 2007 at 8:12 pm
They should- the red roses are from your 17 birthday. The blue rose is from your father’s birthday and the horses are your relatives. J/k
Wrote: Nov 12, 2007 at 8:28 pm
That is cool maybe i’ll add that to my blog too!:eek:
Wrote: Nov 15, 2007 at 8:26 pm
Cool but how do I ad it, do I just copy your text here and fill in just the path to your image
Wrote: Nov 15, 2007 at 8:40 pm
Bob, copy my code and replace “path_to_your_image.jpg” with the url where your image is stored. You are going to want to upload your images to blogger first and copy the path to each image or you can upload your photos directly to Picasa (As your blogger images are stored there) and copy the url from there.
Wrote: Nov 15, 2007 at 10:22 pm
Hi Rose thanks for your help, what I did was create a slideshow using my images on Picasa, which thanks to you I am now aware of, and titled it Previous Post’s Images, the slideshow seems to start from the beginning of the album everytime you open the blog page, still cool, thanks
Wrote: Nov 29, 2007 at 7:07 pm
Re:
Add a Scrolling Image Marquee to your Blog
Rose,
How would I do the same thing with a text list instead of images?
Is there a way to embed it into a blogger post?
Thanks,
Ron
Wrote: Nov 29, 2007 at 7:23 pm
<MARQUEE LOOP=”infinite”>Text to scroll</MARQUEE>
Loop – “infinite” will cause the scrolling text to keep scrolling for ever. You can also make your text scroll up & down.
Wrote: Dec 12, 2007 at 11:42 am
Is there any way to slow down the scrolling speed?
Wrote: Apr 23, 2008 at 5:42 pm
thx a lot, it was very helpful!! it works in Firefox
Wrote: Sep 10, 2008 at 1:10 am
how can I make link on to the scrolling image
Wrote: May 6, 2009 at 10:39 pm
WOO thank you SO much!! i had been looking for how to change the height on them images…i’m reeally new to the whole html thing..but THANKS!!! you helped a million =]