ADVERTISEMENTS
Adding scrolling text or marquee-html codes for bloggers
This post explains you how to add Scrolling text(also called as marquee)to your blog sidebars,blog posts,etc.
Another way to attract the visitors is adding some decoration to the site like scrolling text,etc.But,don't decorate it too much,particularly if your site contains too much text as it irritates and spoils the concentration of the reader.You can add scroll bars to tell your visitors what will be your next updates,popular posts,advertisements,etc.
So,how to add the scrolling text in your blog,let me explain it:
Adding simple scrolling text:
Here is the code to add a simple scrolling text from right to left side
<marquee>code to simple scrolling text</marquee>
The output will be as shown below:
If you want some more attraction,then try these,
Add a background color to the text:
<marquee bgcolor="#99CCFF">code to simple scrolling text</marquee>
The output will be as shown below:
You can choose your background colour by replacing the hexadecimal code(#99ccff).
Here are some mode attributes to learn:
direction="left"
direction="right"
direction="up"
direction="down"
The above attributes tells at which direction to text should scroll.
Use the code below:
<marquee direction="right" bgcolor="#99CCFF">code to simple scrolling text</marquee>
The output will be as shown below:
Please do try for all directions.
Few more attributes:
You can add this attribute for alternate change in the text.
Here is the code to do this:
<marquee behavior="alternate" bgcolor="#33FFCC">code to simple scrolling text</marquee>
The output will be as shown below:
One more way of using this attribute:
Here is the code to do this:
<marquee behavior="alternate" direction="down" bgcolor="#33FFCC">code to simple scrolling text</marquee>
The output will be as shown below:
You can also set the speed of the text with this simple attribute:
scrollamount="2"
The lower the scrollamount value, the less the speed it moves,
The html code for this is:
<marquee behavior="alternate" direction="left" bgcolor="#9999CC" scrollamount="2">code to simple scrolling text</marquee>
The output will be as shown below:
Pausing the text when mouse is over the text:
It is very useful when the reader wants to read the text,and the scrollamount is big,sothat he will put the mouse over the text to pause the text and read the matter:
Here is the code to do this:
<marquee behavior="alternate" direction="left" bgcolor="#CCCCCC" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50"> code to simple scrolling text</marquee>
The output will be as shown below:
(place the mouse over the text to test it)
Changing the text colour:
Here is the code to change the text colour:(Add it before the marquee tag)
<span style="#FFFFFF">
Here is the important one and most useful one, adding hyperlinks in the scrolling text.
Hyperlink means a link when clicked go to another location(site).
Let's see how to add hyperlinks to the scrolling text:
<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">LINK#1</a> <a href="url#2">LINK#2</a> <a href="url#3">LINK#3</a> </marquee>
NOTE:Replace the Link#1,Link#2,Link#3 with the text and url#1,url#2 and url#3 with the target url addresses.
If you want to open the links in new window,here is the code:
<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">LINK#1</a> <a href="url#2">LINK#2</a> <a href="url#3">LINK#3</a> </marquee>
That's it!Now you can add this to your blogger sidebar,in the blog post,where ever you want.
If you want to put this in sidebar,then sign in to your blogger account>click the add a page element> and paste the code in html/javascript and save the changes .
0 comments