MARQUEE-Scrolling text and link hacks

Marquee can considerably increase the viewers attention towards the text or link rolling into it.

It is used and is can be useful for any announcements on your Blog.

>>How to add the scrolling text in your blog?

Let me explain it:

ONE 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:.....

code to simple scrolling text

         If you want some more attention of your Viewers,

         Change the Background color to the text,

         Note: Use matching and favourable colours that look good with each other.

         <marquee style="color:#667C26;">code to simple scrolling text</marquee>

The output:.....

code to simple scrolling text

        You can choose your background colour by replacing the hexadecimal code(#99ccff).
Click here to see the codes of the different colors.

Here are some mode attributes to learn:

direction="left"

direction="right"

direction="up"

direction="down"

The above attributes tells the text which direction to scroll.

Apply whichever you want

         <br /><marquee direction="right" style="color:#99CCFF;">code to simple scrolling text</marquee><br />

Here are its examples   ....................

code to simple scrolling text


code to simple scrolling text


code to simple scrolling text


code to simple scrolling text

More attributes:
                              You can add this attribute to alternate the text means it will bounce within the coloured area.

Like this

code to simple scrolling text

Its Code:-

<marquee behavior="alternate" direction="down" bgcolor="#33FFCC">code to simple scrolling text</marquee>

You can also set the speed up the widget text with a simple attribute:

scrollamount="2"

The lower the scroll amount value, the less speed it moves,
the html code adding scrollamount would be

<marquee behavior="alternate" direction="left" scrollamount="2" style="color:#9999CC;">code to simple scrolling text</marquee>

(for scrollamout =2) in this marquee it would be at this speed

code to simple scrolling text

(for scrollamount=10)

code to simple scrolling text

        TWO

        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 for it

<marquee behavior="alternate" direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50" style="color:#CCCCCC;"> code to simple scrolling text</marquee>

It will have the following feel

code to simple scrolling text

(Roll the mouse over the text)

           THREE

           Changing the text colour:
           Here is the code to change the text colour:(Add it before the marquee tag)

<span style="#FFFFFF">

The whole code would be like 

<span><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" style="color:#cccccc;"><br /><br />code to simple scrolling text<br /><br /></marquee>

code to simple scrolling text



Here are the codes for various colours

Here is the important 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:

FOUR

Adding hyperlinks(open in the same window):

sample sode for it.
<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 desired url addresses.

<marquee behavior="scroll" align="middle" direction="left" scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()" style="color:#99FFFF;"><br /><br /> <a href="#your link">your link</a> <a href="http://www.widgetblogger.co.cc/2009/05/change-colour-of-templates-with-colour.html">Colour chart</a> <a href="http://www.google.com">google</a><br /><br /> </marquee>

The output will look like this

EtalkIndia Colour Codes Gmail


If you want to open the links in new window,here is the code:

Here's the code for it

<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 .This is shown in the below pictures.

happy marqueeing

If you have any doubts, ask your questions via your comments.

Tell us which widgets you need us to post