Create a Scrolling Marquee for Images & Buttons

The other day I was looking for a hit counter and came across an interesting feature. Unrelated, of course, but it piqued my interest and thought I'd share it with you.

It's a scrolling marquee for images like this ( I used images from my sidebar. You can use whatever you want.)











I saw this feature on sister sites: http://www.sweetnsassygirls.com/ and http://barefoot-mommy.blogspot.com/

Not only is controlling clutter an ongoing issue at home, but also on one of my other blogs. I had to find out how they did it. A little research revealed the nuts and bolts of this scrolling feature.

◘ ◘ ◘ ◘ ◘

Would you like to add this to your Blogger blog? Here's a simple tutorial.
Note: Each set of steps shows you how to add one image to your marquee. Repeat these steps for each image you want to add.

In Blogger, go to your Layout tab and click to add new element. Choose Add HTML. When pasting in the code, do not leave any blank spaces between one section of code and another unless instructed to do so.

1. Copy and paste the following code into the box:
<a href="
Paste the URL of the site your image will link to. End it with:
" target="_blank">
This will open the link in a new window so your readers don't lose your page.



2. Copy and paste the following code:
<img alt="
Type in what you want your readers to see if they hover their mouse over the image. You can just type in the name of the site that it links to.



3. Continue by pasting in this code:
" src="
Then paste in the image URL. How do you find it? There are a two different ways you can locate it.

a) In the text box where the site invites you to grab their button, look for code that starts with http:// and ends with .jpg Highlight and copy the entire bit of that code. To make it easier to find, you may want to copy all of the code from the text box and paste it into a notepad document so it's easier to see. In the case of Sweet 'n' Sassy Girls, their image URL is

http://i267.photobucket.com/albums/ii296/strawberyred/sassybuttondots-1.jpg

b) If you right click on the picture, you'll see a menu pop up. One of your options may be to copy image location. If you see that option, click it. That's what you need.



4. Next, copy and paste in this code:
" title="
Type in the name of the site that this image goes to (it can be the same thing used in step 2.)



5. Finish up by copying and pasting this code:
"></a><br/>



Repeat steps 1-5 until all your badges are in place. When you are done, end the whole thing with this code:
</marquee>

◘ ◘ ◘ ◘ ◘

Now, would you like to customize this a little?
The different elements for how your marquee behaves are:

onmouseover="this.stop()"
This stops the marquee from scrolling when you hover your mouse over it. You can delete this code if you don't want it to stop.

onmouseout="this.start()"
This resumes the scrolling when you move your mouse off the marquee.

scrollamount="2"
This is your speed. I can't tell you what number is what speed, but 4 is approximately twice as fast as 2. You can experiment with this, but make sure it's slow enough for people to read as it zooms by.

loop="true"
This makes your marquee scroll endlessly. If you want it to scroll once through the list and stop, change true to false.

direction="up"
This scrolls everything in an upward direction. To scroll down, change the word up to down. If you want it to scroll from right to left, change the word up to left. From left to right, change it to right.

align="center"
This places your marquee in the center of your space. You can change it to left or right if you want it aligned with either margin. For a marquee in the sidebar, my personal preference is to center it.

width="150"
height="300"
You can adjust these to fit them within your space. If the width is more than your sidebar, the images will be cut off, which doesn't look so great. If you're scrolling from side to side, you can change the width and height to fit the space you're using.

For more details on how to customize your marquee, check out this blog post by Kang Rohman.

Did you like this post? How about subscribing in a reader or by Email?