Article | Add Scrolling Text / Links (marquee html codes) to your blog

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 like:

Example 1:

code to simple scrolling text



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>Example 2:

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.

Use the code below:

<marquee direction="right" bgcolor="#99CCFF">code to simple scrolling text</marquee>

Here are some examples:

Example 3:

To scroll in the 'right' direction:

code to simple scrolling text



Example 4:

To scroll in the 'up' direction:

code to simple scrolling text



Example 5:

Down: ( I changed the hexa decimal codes for different colours )

code to simple scrolling text



few more attributes:

You can add this attribute to alternate the text

behavior="alternate"

Here is the code to do this:

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

Example 6:

code to simple scrolling text

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:

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

example 7:(for scrollamout =2)

code to simple scrolling text



Example 8:(for scrollamount=5)

code to simple scrolling text



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, so that 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>

Example 9:

code to simple scrolling text



(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 and after the marquee tags)

<font color="#ff0000">XXXXXXXXX</font>

So, the code looks like this

<font color="#ff0000"><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" bgcolor="#cccccc">Code to simple scrolling text</marquee></font>

Example 10:

Code to simple scrolling text



Adding hyperlinks:

You can also add the hyperlinks in text.

 Here is the sample code:



The output will look like this:

MINC # BackLinks # Home

That's it!Now you can add this to your blogger sidebar,in the blog post,where ever you want.



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

Loading...