How to add Scrolling text to your blog

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

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:
Your text here

How to add a background color to the text

<marquee bgcolor="#2E2EFE">Your text here</marquee>

The output will be like this:


 Your text here

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:

 Your text here

How to scroll in the 'up' direction:

<marquee direction="up" bgcolor="#F7FE2E">your text here</marquee>

The output will be like this:

 your text here

 How to scroll in the 'down' direction:

<marquee direction="down" bgcolor="#FF0000">your text here</marquee>

 The output will be like this:

 your text here

How to alternate the text

<marquee behavior="alternate" direction="left" bgcolor="#81F7F3" scrollamount="2">your text here</marquee>

The output will be like this:

 your text here

 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:

 your text here

example 2 for scrollamout =4

<marquee behavior="alternate" direction="left" bgcolor="#FA58F4" scrollamount="4">your text here</marquee>

The output will be like this:

 your text here

example 3 for scrollamout =6

<marquee behavior="alternate" direction="left" bgcolor="#FA58F4" scrollamount="6">your text here</marquee>

The output will be like this:

 your text here

 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:

 your text here

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:

      Royal Info Grabber  Royal Tutor  HTML color codes chart 

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

Subscribe to this Blog via Email:

Click here to Subscribe to FREE email updates from "Blogger Tutorials", so that you do not miss out anything that can be valuable to you and your blog!!

Spread It :