Add Scrolling or marquee text box to Blogger / Blogspot Blog or Website

byKrishna Srivastava -

Scrolling or marquee text is very attractive way to tell and write your blog news. and adding it to your blog makes it more attractive because it’s amazing way to tell your blog visitors your blog latest news. the nice thing here is that “Scrolling Or marquee text for blogger” can be re edited by you to suitable your blog needs and your needs, and we’ll show you a lot of “Scrolling Or marquee text for blogger” kinds and after this, we’ll explain to you how to use it and how to add it to your blog in the way you like, Looks great, right? so lets learn step by step how to do it in the easiest way

The Scrolling Or marquee text code contain 2 tags, opening tag, and closing tag,
and between the 2 tags , the is text goes there. and it looks like that:

<opening tag> Your Scrolling text  </closing tag>

And this is the most simple sample to learn you how does it work, and the real code for Scrolling Or marquee text looks like the next.

<marquee>Scrolling Or marquee text for blogger Demo</marquee>

Scrolling Or marquee text for blogger Demo

And if you added this for your blog,it’ll generate you a normal Scrolling Or marquee text box with default text font and size and with White back ground, But what we do if we need to change the direction, adding background color, change the text speed ( scrollamount ) or change it’s height and width.
Oh, that is very easy but it need your complete attention. we can control direction, background color, scrollamount Or any thing by adding values to the opening codes, The we add the values like the next example. the value to make the direction : Righ is


direction="right"
 
So if we want our Scrolling Or marquee text moves to right, we’ll add the right moving value to the opening tag. and here is how it going to be. Before:

<marquee>Scrolling Or marquee text for blogger Demo</marquee>

Scrolling Or marquee text for blogger Demo 
 

After:

<marquee direction="right">Scrolling Or marquee text for blogger Demo</marquee>

Scrolling Or marquee text for blogger Demo


As you see we add the value to the marquee text code Opening tag after the wordAnd we can simply add more than one value for our marquee text code "opening tag" Like the next sample

<marquee bgcolor="#FF00FF"  direction="right">Scrolling Or marquee text for blogger Demo</marquee>

Scrolling Or marquee text for blogger Demo

Now i gonna write to you Big List will show you all values that you may need with a small description for every one. so lets go.

The Value 
------------------------------------------------------------------------
direction="left"                                  Makes the text moves to left
------------------------------------------------------------------------
direction="right"                                Makes the text moves to right
------------------------------------------------------------------------
direction="up"                                   Makes the text moves to up
------------------------------------------------------------------------
direction="down"                              Makes the text moves to down
------------------------------------------------------------------------
behavior="alternate"                         Makes the text go to right and when it reach the end of your marquee
                                                        box go back to the left
------------------------------------------------------------------------
behavior="slide"                               Makes the text Stop when it reach to the end of your marquee box
------------------------------------------------------------------------
loop="4"                                          If you need to control the times that the text going to be displayed. add
                                                        this value and change number 4 to the number of times that you need
------------------------------------------------------------------------
scrollamount="2"                              Set your text speed, 1 is slow 2 is fast 3 ,4 ,5 is faster , the more you
                                                        increase this number, the faster the text’ll be goes.
------------------------------------------------------------------------
width="400"                                    Control your text width
------------------------------------------------------------------------
height="66"                                     Control your text Height
------------------------------------------------------------------------
onmouseover="this.stop()"               Makes the text stop when
onmouseout="this.start()"                 your is over the text:
------------------------------------------------------------------------
bgcolor="#9999CC"                      Changing background color., change 9999CC to the color you want.if
                                                      you need to know more about colors numbers and values please see our
                                                      surprise at the end of this Post
------------------------------------------------------------------------
style="color: #FF0000"                   Changing Text color., change FF0000 to the color you want. if you need
                                                       to know more about colors numbers and values please see our surprise
                                                       at the end of this Post
------------------------------------------------------------------------
style="font-size: 1em"                       Changing Text Size.
------------------------------------------------------------------------
style="font-family: Tahoma"              Changing Text Style.
------------------------------------------------------------------------
style="font-size: 12pt; color:             to change the text color  and size and style at the same time you may
#800000; font-family: Tahoma"        merge the values like this
                                                     
------------------------------------------------------------------------


I hope this help you, final thing if you need to add Links to your marquee box, you need to chage the text between the opening tag and closing tag, and instate of the text, past the next code.

<a href="Link URL">Link Title</a> 


Finally, here is demo Customized marquee text box, and it’s code to help you. The code.

<marquee direction="Up" scrollamount="8" width="318" style="font-size: 12pt;
color: #800000; font-family: Tahoma" height="66" bgcolor="#FFCC99">Scrolling Or marquee text for blogger Demo</marquee>

Scrolling Or marquee text for blogger Demo

OR 

<marquee direction="LEFT"><div class='panel'>
<a href='http://djmix4u.blogspot.com/2010/02/entourage-vol2-dj-nyk-2010.html' title='entourage vol %u2013 02 dj nyk (2010)'><img alt="" height="40" src="http://3.bp.blogspot.com/_aVNcsyOiljE/S35QWkRD7zI/AAAAAAAAAa4/XhNGrpLyrCM/s320/coverentouragevol2djnyk.jpg" width="60" /></a>
<div class='fmeta'>DJ NYK (2010)</div></div></marquee>


DJ NYK (2010)



Manage marquee speed:

this is very slow
<MARQUEE behavior="scroll" direction="left" width="100%" scrollamount="1">YOUR TEXT GOES HERE</MARQUEE>


this is real fast
<MARQUEE behavior="scroll" direction="left" width="100%" scrollamount="5">YOUR TEXT GOES HERE</MARQUEE>


You can add these marquee texts to your blogs, sidebar, header & your posts.

First login in to your blogger account Go to Layout> Edit html> click the add a page element>  select html/javascript and paste the code in html/javascript and save the changes .

Then move this html/javascript box where ever you want.

Tags

Posted by Krishna Srivastava

Previous Post Next Post