This time I like to explain you how to add marquee (also called as Scrolling text)to your blog sidebars,blog posts,etc. This will definitely bring the attraction of readers.You can give a welcome message or any sort of warning message in this scrolling text widget anywhere that accepts marquee code.Please take care not to avoid or change any part of the code.
So,Here is the code to add a simple scrolling text from right to left side
<marquee>Your text here</marquee>
The output will be like this:
How to add a background color to the text
<marquee bgcolor="#2E2EFE">Your text here</marquee>
The output will be like this:
You can choose your background colour by replacing the hexadecimal code(#2E2EFE).
Click here to see the codes of the different colors.
Here are some mode attributes
direction="left"
direction="right"
direction="up"
direction="down"
The above attributes tells the text which direction to scroll.
How to scroll in the 'right' direction:
<marquee direction="right" bgcolor="#80FF00">Your text here</marquee>
The output will be like this:
How to scroll in the 'up' direction:
<marquee direction="up" bgcolor="#F7FE2E">your text here</marquee>
The output will be like this:
How to scroll in the 'down' direction:
<marquee direction="down" bgcolor="#FF0000">your text here</marquee>
The output will be like this:
How to alternate the text
<marquee behavior="alternate" direction="left" bgcolor="#81F7F3" scrollamount="2">your text here</marquee>
The output will be like this:
You can also change the speed of the text
scrollamount="2"
example
1 for scrollamout =2
<marquee behavior="alternate" direction="left" bgcolor="#FA58F4" scrollamount="2">your text here</marquee>
The output will be like this:
example
2 for scrollamout =4
<marquee behavior="alternate" direction="left" bgcolor="#FA58F4" scrollamount="4">your text here</marquee>
The output will be like this:
example
3 for scrollamout =6
<marquee behavior="alternate" direction="left" bgcolor="#FA58F4" scrollamount="6">your text here</marquee>
The output will be like this:
How to Paus the text when mouse is over the text:
<marquee behavior="alternate" direction="left" bgcolor="#ACFA58" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50">your text here</marquee>
The output will be like this:
How to
add hyperlinks in 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>
Replace the Link#1,Link#2,Link#3 with the text and url#1,url#2 and url#3 with the target url addresses.
Here is how I do
<marquee behavior="scroll" direction="left" bgcolor="#FE2EF7" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="http://royalinfograbber.blogspot.com/">Royal Info Grabber</a> <a href="http://royaltutor.blogspot.com/">Royal Tutor</a> <a href="http://html-color-codes.info/">HTML color codes chart</a> </marquee>
The output will be like this:
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 .
Happy Blogging:)