You can have a scrolling text added to your blog using the HTML tag marquee. Though marquee tag is deprecated now, it still works in almost all the browsers. Here I will show you how to use the tag to have scrolling text or images added to your blog.
Marquee Tag
The marquee tag is a container tag that will display the enclosed text or images as scrolling. The structure of simple marquee tag is as given below.
<marquee><marquee>
You can insert the text you want to scroll between these two starting <marquee> and ending </marquee> tags as in the example below.
<marquee>The text to scroll</marquee>
The text will appear like this on your blog.
You can make use this HTML code to get the scrolling text inside your post or can be added as a gadget by using Add a Gadget and then selecting HTML/Javascript gadget. You can make use of the Cross-column widget to have a flashing news scrolling text below your header.
Now let's see what are the options available for marquee tag
Change Direction
Change Direction
You can change the direction of the marquee text by adding the attribute direction to your starting marquee tag. By default the direction is right to left and we can change this as shown below.
<marquee direction="right">Right Scrolling Text</marquee>
You can have a vertical scrolling text by changing the direction to UP or DOWN as shown in the example given below
<marquee direction="up">Upward Scrolling Text</marquee>
<marquee direction="up">Upward Scrolling Text</marquee>
Change Height and/or Width
You can also provide a height or width for the marquee. We change the height of the marquee given above by adding the attribute height to it. The height value can be entered in pixels or as percentage.
<marquee direction="up" height="100">Upward Scrolling Text</marquee>
Change Background and Font Color
You can change the font style and color also by adding the style attribute to the text as shown below.
<marquee direction="right"><span style="color: blue; font-size: 14px;">Right Scrolling Text</span></marquee>
The background color of the marquee can be changed by adding the attribute bgcolor. The colour is to be entered as hexadecimal code for the color. For example we will give a yellow colour background to the marquee.
<marquee direction="right" bgcolor="#ffff4d"><span style="color: blue;">Right Scrolling Text</span></marquee>
Note down that we have added the bgcolor attribute to the marquee tag. You can get the hexadecimal color code using HTML Color Picker by W3Schools.
Control Scrolling Speed
The scrolling speed of a marquee can be increased using the scrollamount attribute. The value for the scrollamount can be 1 to 10. 1 is the slowest and 50 the fastest. Default is 6. For example:
<marquee direction="right" scrollamount="1"><span style="color: blue;">Right Scrolling Text</span></marquee>
<marquee direction="right" scrollamount="5"><span style="color: blue;">Right Scrolling Text</span></marquee>
<marquee direction="right" scrollamount="10"><span style="color: blue;">Right Scrolling Text</span></marquee>
Pause the Scrolling
The scrolling can be paused when the user brings the cursor on the scrolling text by adding onmouseover attribute to the marquee. onmouseout attribute can be used to start scrolling when the cursor moves away from the text. This will help the visitors to read the text content.
<marquee direction="right" bgcolor="#ffff4d" onmouseover="this.stop()" onmouseout="this.start()"><span style="color: blue;">Right Scrolling Text</span></marquee>
Bring your cursor to the scrolling text below to see it working.
How to Add Links to Scrolling Text
You can add a hyperlink to a scrolling text using the HTML tag <a> . The format of the <a> tag is as follows:
<a href="">text to display</a>
The website URL is to provided as the value for the attribute href.
See the example below
<marquee><a href="http://kvklibrary.in">Click here to visit our library website</a></marquee>
No comments:
Post a Comment