MARQUEE-Scrolling text and link hacks






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.



Blogger Widgets
happy marqueeing

G+

1 comments:

Post a Comment