Scrolling Text Code In HTML For Blogger Or Wordpress Blog

Scrolling text is one of the finest widget for bloggers, and everyone want to add this scrolling text on their blog for making their blog more attractive.Today i come up with this widget for my friend bloggers you are able to add this widget to your blog by adding just a simple code.

The Scrolling text widget usually attracts visitors and pulls them again and again on your website.Its usually used for advertisements, what will be your next updates, popular posts and etc.This widget decorate your blog and make attractive but don't decorate it too much, particularly if your site contains too much content then it spoils the concentration of reader.

So lets start the tutorial on how to add Scrolling Text widget to your blog.

Here so many scrolling text widgets which comes in different colors styles and different move of the text so lets start it check it out yourself which one suits your blog.

First go to your blogs dashboard > Click On Design

We recommend you to choose cross column as it shows the scrolling text top in your blog and catch the maximum eyes but if you want any other place then you able to place this anywhere in your blog.

Now click on the Add a Gadget link and choose HTML/Javascript gadget from the list of gadgets.

1.) Adding Simple Scrolling Text:

<marquee>How to Add Simple Scrolling Text To Your Blog</marquee>

The Output will look like shown below:

How to Add Simple Scrolling Text To Your Blog

2.) If you want to add some background  colors then try this one:

<marquee bgcolor="#99ccff"> How to add simple scrolling text to your blog</marquee>

The Out will look like shown below:

How to add simple scrolling text to your blog

You would able to choose background colors as you want from HTML color codes chart click here.

3.) Now Move your text in many directions like, Left, right, up and down:

For moving text left add:- direction="left"
For moving text right add:- direction="right"
For moving text up add:- direction="up"
For moving text down add:- direction="down"

See the examples below:

<marquee direction="right" bgcolor="#99ccff">How to add simple scrolling text to your blog</marquee>

The Output will shown below:


How to add simple scrolling text to your blog

For Moving Text up change the direction attribute to up:

<marquee direction="up" bgcolor="#99ccff">How to add simple scrolling text to your blog</marquee>

The Output will shown below:

How to add simple scrolling text to your blog

As like above for moving text down change the direction attribute to down:

<marquee direction="down" bgcolor="#99ccff">How to add simple scrolling text to your blog</marquee>

The output will shown below:

How to add simple scrolling text to your blog

4.) For setting the speed of text scrolling just add some more attribute:- (scrollamount="2")

<marquee direction="left" bgcolor="#99ccff" scrollamount="2">How to add simple scrolling text to your blog</marquee>

The output will shown below:

How to add simple scrolling text to your blog

5.) Now Pause the text when mouse is over the text:
Its very useful option because when the reader want to read the text and the scroll amonut is big so that reader want to put the mouse over the text and the text will pause there.

<marquee direction="left" bgcolor="#99ccff" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">How to add simple scrolling text to your blog</marquee> 

The output will shown below:

How to add simple scrolling text to your blog

6.) The Most Important is Adding Links in The Scrolling Text:

<marquee direction="left" bgcolor="#99ccff" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"><a href="tekleisure.blogspot.com>How to add simple scrolling text to your blog</a></marquee>

The output will shown below:

Oops it looks like the page is not able to shown this example because of already added a maximum number of examples for seeing this code working click here

You are able to add some more links by repeating the <a href="url">yourtext</a> code tag.

Now save your HTML/Javascript widget and check it yourself on your blog.

Having any questions or problems adding this widget drop your questions, problems or your suggestions as comments below.