MARQUEE-Scrolling text and link hacks ~ Log-Tutorial

UPDATE: I updated some of my posts, this post I update click this link........

STEP #1

Log in to Blogger, go to Layout ->Add a Gadget of HTML/JavaScript type.

Then add this code in to it:

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 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="#">Colour chart</a>  <a href="http://www.google.com">google</a><br /><br />  </marquee>



    your link  Colour chart  google

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

About Admin MC3

Relax and enjoy, don't be rush.

Log-Tutorial

MARQUEE-Scrolling text and link hacks

About Admin MC3

Related Post