How to Create Scrolling Ads or Blogroll

On a blog or website you need to find ways to group like things together to save valuable space that you might want to use for showcasing other important things like an article list or recent posts or even other ads that actually make you money.

Using the HTML tag <marquee> will let you combine similar units like Ads or text links and this will really save you a bunch of valuable sidebar space.

I like to think of sidebar space as REAL ESTATE. What you have on the sidebar should be making you money for the most part. When you think of it as prime real estate you will be selling that space and not just giving it away out of the kindness of your heart. Of course, you will want to put things on your sidebar that you want besides ads but basically your content, what you write about is what you giveaway to your readers so why not sell the rest? It's a WIN-WIN situation for both you and your readers.

Here are some examples of what you can do with the <marquee> tag using graphics or just text.

What I also like about the marquee tag is that when you hover your mouse over a unit it will stop so the viewer can click on an ad or text link.

The first scrolling Ad marquee is using graphic Ads that are 125px X 125px in size. I have them scrolling to the left.





The second scrolling Ad marquee is using graphic ads that are 125px X 125px in size. I have them scrolling to up.




The third scrolling Ad marquee is using text links. I have them scrolling to up.


Sweeties Sweeps
Champagne Living
Mommy Bloggers Guide
Sweeties Swag


The fourth is a marquee that scrolls in a single line.

Thanks for stopping by the Mommy Bloggers Guide. Please come again!

The code you need to start with is:

<marquee onmouseover="this.stop()" direction="left" onmouseout="this.start()" scrollamount="4" loop="true" width="250" height="130">

You can change the height and width to fit whatever area you are working with.

You can play around with the scrollamount number to have your scrolling go faster or slower. The higher the number the faster your marquee will scroll.

The loop="true" tells the marquee to keep going and going and going. You can also use loop="2" where 2 is the amount of times you want your marquee to scroll and then stop

If you want the scroll to go up then change the direction to up - and you can use left, right, down.

If I am using ads I try to make all of them have the same size so it looks uniform when it is scrolling. Remember to change the height and width to fit whatever area you are working with. Then you put whatever links or graphics you want to scroll.

For the graphic ads my code looked something like this after the opening marquee tag:

<img alt="Champagne Living" src="http://i408.photobucket.com/albums/pp164/zipporahs1/CL-Card.png" border="0" height="125" /></a>

For the text links my code looked something like this after the opening marquee tag:

<a href="http://www.champagneliving.net/" target="_blank">Champagne Living</a>

And then you need to close the marquee off with <marquee>

Let me know if you have questions about using the <marquee> tag. It has been around for a long time but I don't think we take enough advantage of this simple tag because we have been taught that as Flash, Java, and other fancy technologies come out we need to be using those. What you have to remember is that although new technologies are very cool they can be complicated to implement and people will older computer may have a hard time getting your site to load if you use them.

And, with just about everything else on my site, using the <marquee> tag is free and does not require that you purchase any program to use it.

NEW HERE? Subscribe to Mommy Bloggers Guide for Free by Email or RSS. You can also follow Wendy on Twitter and contact her by Email if you have questions, comments, ideas, or you would like to write a guest post.