Saturday, July 9, 2011

Add Scrolling Text to Blogger

Scrolling text or marquee is usually a block of texts that moves from left to right or vice versa, and up to down or vice versa. It is a good way to deliver news, updates or important announcements as it easily captures users’ attention because it scrolls.

The simplest marquee text that you can do is a scrolling text that moves from right to left:

<marquee>scrolling text here</marquee>
Result:
from right to left

If you want to change the text to move to the right instead, just add the code:
<marquee direction=”right”>scrolling text here</marquee>
Result:
from left to right

Background color is set to white by default. To change the color, add the code:
<marquee bgcolor=”#82C1FF”>scrolling text here</marquee>
Result:
with background color
The code in between the quotation marks are the hexadecimal color code equivalent of the background color of the example above. Many hexadecimal color code generators are available on the web. Just google “hexadecimal color code generator”.

To scroll the text up:
<marquee direction=”up” bgcolor=”#82C1FF”>scrolling text here</marquee>
Result:


from down to up

Of course, you can remove the bgcolor marquee attribute anytime if you don't want a background color.

To scroll the text down with background color:
<marquee direction=”down” bgcolor=”#82C1FF”>scrolling text here</marquee>
Result:


from up to down



To make the scrolling text bounce between left and right:
<marquee behavior="alternate" bgcolor="#82C1FF">scrolling text here</marquee>
Result:
bounce between left and right

The scroll speed can also be adjusted by using the following scrollamount marquee attribute.
<marquee bgcolor="#82C1FF” scrollamount=”10">scrolling text here</marquee>
Result:
higher scrollamount is faster

The above attributes are the commonly used customization that you can do to marquees.

No comments: