How To Make Scrolling Text (Marquee)?
 |
| How To Make Marquee (Scrolling Text) |
To make scrolling text or marquee is actually easy. This time we will try to make several kind of marquee, so that more variation you can choose. We will learn how to make the code, then learn how to install on blog...
1. The basic code to make marquee or scrolling text is:
<marquee>Scrolling Text</marquee>
The code above will look like this
But besides the above code there are some additional code that you can give to make variation of marquee. Below we will give the code and at the same time practicing that marquee...
2. Code scrolldelay="number" is used to set delay in milliseconds, so for delay in 1 second input 1000 in number.
Marquee code example:<marquee scrolldelay="500">Scrolling text delay 0,5 second</marquee>
The result will look like this:
3. Code loop="number" is used to adjust loop or repetition from marquee.
Marquee code example:<marquee loop="3">MARQUEE rotated 3 times only</marquee>
The result will look like this:
Note: After 3 times text will disappear
4. Code width="number" is used to adjust width of scrolling text, it can be in pixels or percentage of the existing field.
Marquee code example:<marquee width="50%">MARQUEE width 50 percent</marquee>
The result will look like this:
5.Code bgcolor="color" is used to give background color to marquee if needed.
Marquee code example:<marquee bgcolor="yellow">Scrolling text yellow background</marquee>
The result will look like this:
6. Code title="message" is used to display a message when the mouse cursor is placed in the path of scrolling text.
Marquee code example:<marquee title="The message can be read">Scrolling text with message</marquee>
The result will look like this:
Note: Place the mouse cursor on the track and not on the text to read the message.
7. Code scrollamount="number" is used to control the speed of the text movement. The larger the number, the speed is faster.
Marquee code example:<marquee scrollamount="14">MARQUEE SPEED 14!!!</marquee>
The result will look like this:
8. Code direction="left/right/up/down" used to set the direction of the scrolling text.
Marquee code example:<marquee direction="right">MARQUEE move to right</marquee>
The result will look like this:
9. Code behavior="scroll/slide/alternate" is used to set behavior of movement.
Scroll if you want the text to move on to a side and emerge from the other side.Slide if you want to move the text once and then stopped and repeated again.
Alternate if you want the text seen bouncing back from end to end.
Marquee code example:
<marquee behavior="alternate">MARQUEE moves back and forth</marquee>
The result will look like this:
10. Now we will make variation from code above. We will make text moving down, so we will add code height to make room for text movement.
Marquee code example:<marquee direction="down" height="100">MARQUEE moving down</marquee>
The result will look like this:
11. So how do I make this text stop if crossed by the mouse cursor?
Add this code:onmouseover="this.stop()" onmouseout="this.start()"
Marquee code example:
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">MARQUEE moves back and forth</marquee>
The result will look like this:
Note: Move the cursor in the text or track to stop the movement.
12. Can Marquee given link?
Of course, as example look this following code:<marquee direction="down" height="100" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
<a href="http://seobloggertricks.blogspot.com/2013/12/how-to-make-marquee-scrolling-text.html">How To Make Marquee (Scrolling Text)</a>
</marquee>
The result will look like this:
13. Change Font, Size, And Color of Scrolling Text / Marquee
Font, size, and color can be modified by adding code style="font-family: impact; font-size:24px; color: #cc0000;"font-family: impact; is code to change font. You can change impact with Arial, Times New Roman, etc.
font-size:24px; is code to change font size. Change the value of 24 as you like. The greater the value, the font is larger.
color:#cc0000; is code to change font color. You can replace the hex code #cc0000 with hex value you like.
Marquee code example:
<marquee bgcolor="yellow" style="font-family: impact; font-size:24px; color:#cc0000;" >Scrolling text red color</marquee>
The result will look like this:
14. Where to place this code?
You can place the code in widget or article.To place it in widget follow this step:
1. Click Layout.
2. Click Add a Gadget.
3. Choose HTML/JavaScript gadget.
4. Fill in the code that you made.
To place it in article follow this step:
1. When you write article click HTML.
2. Insert marquee HTML code when in this mode.
3. Back to Compose mode to see if the text is in correct positions.
4. Click Preview to see the result.
OK. Now you know how to make and install scrolling text / marquee.
No comments:
Post a Comment