Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » Adding Scrolling Or marquee text box for blogger “blogspot” blogs.

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Adding Scrolling Or marquee text box for blogger “blogspot” blogs.

Adding Scrolling Or marquee text box for blogger “blogspot” blogs.

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

24,357 views

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,

Scrolling Or marquee text for blogger Demo

Scrolling Or marquee text for blogger Demo

Scrolling Or marquee text for blogger Demo

Scrolling Or marquee text for blogger Demo

Scrolling Or marquee text for blogger Demo

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>

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>

After:

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

As you see we add the value to the marquee text code Opening tag after the word

And 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>

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()" onmouseout="this.start()" Makes the text stop when
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:
#800000; font-family: Tahoma"
to change the text color
and size and style at the same time you may 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>

And here is The Result:

Scrolling Or marquee text for blogger Demo

OH, before i go, a small instructions about adding this marquee box for your blog,
you can add it to your sidebar, to your header, to your posts,

If you want to put this on your header,then 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,

And NOW Lets talk about our surprise About colors codes and numbers.
We made amazing box that gives you the colors codes and number once you click any color, no need now to try to get the colors codes you want in a hard way, now we made a very easy way for you,
please check it out.


Click Here to go to Color Codes Generator
( New Window )

Thanks for reading and i hope this be useful to you,
if you need any help please Leave comment,

Liked It ? Please Share

Comments

31 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Franco says:

    I love this. Especially with a green background. Thank you.

  2. Max says:

    hi Franco, we hope you enjoy using it on your blog.
    thanks

  3. san says:

    thanx
    how can i get black back ground..plz help me

  4. san says:

    i-found-black-color-code-in-color-palate
    thanx

  5. CosmosKGR says:

    Very nice!!!

    How can I put more than one lines for scrolling together?

  6. Max says:

    hi CosmosKGR
    you can write the first line then type < br / > — with out any spaces — and after that enter your second line, i hope that can help

  7. ed says:

    great! a plenty tools for blogger. . .I’ll study them and try them on my blog. thanks

  8. sm says:

    like your site.how can we make read more or continue reading ,these words glitter
    ty

  9. moviesonline says:

    hi this is great imformation. Good scrolling messages with good colours. Thank you

  10. vie says:

    hi…can u stop the code from moving cause its difficult for me to copy it…

  11. Joney says:

    How to make the transparent background?

  12. SSgt says:

    I also am curious if the background transparent. As the scroller is over a background image and I don’t like the it blocks out the background image

  13. Max says:

    hi Joney & SSgt
    If you want a transparent background, just remove this tag. bgcolor=”#FF00FF”

  14. Chris says:

    I have used your code for marquee scrolling text but whatever size fonerdana t i put (i try v12) in there, when it is saved and published, it is always looks like a verdana size 6-8 font

  15. Max says:

    hi Chris, can you show me the code you’ve used?

  16. syafinasz says:

    How to put this tag board into my blog?

  17. heyhey says:

    this was a highly informative blog, my only problem was that I was getting frustrated trying to read the text as it kept scrolling.

  18. Max says:

    hi, this is internet explorer problem, please browse the post in firefox or opera

  19. Fea says:

    hai Max. i alredy make some great scrooling using ur step. but my text it only can appear down the bar i mean.. i want to know how to make it to the NAVBAR ( header) can u help me out :(

  20. Max says:

    hi fea, once you save your new html/java gadget, go to page elements, and there you can move it any where.

  21. meanmachine says:

    Thanks! This is great. But can I use an image for the background instead of bgcolor?

    • Max says:

      hi meanmachine, no thing impossible when it comes to codding, but you should be css or html expert to do it,

  22. jblhopper says:

    I have added a scrolling marque to my sidebar and it worked fine up until a few days ago. It seems like it’s stuck or something, could you maybe help me out?

  23. Max says:

    hi jblhopper, did it stop working without changing any thin in the code, if yes, this is very wired, you can remove it, and add it again.

  24. Abijah Gupta says:

    Interesting…. :D
    Nice tutorial

  25. David Cannon says:

    what do I put in the bracets to get it to stop when I am over it*

  26. Liyana says:

    Thanks….

  27. Robin Hood says:

    Hi. Pls visit my blogspot blog in both chrome and mozilla. You can see the welcome to robinhood banner just above posts. The code for that banner is

    ★ WELCOME TO ROBIN HOOD SOFTWARES ★ THE ULTIMATE SOURCE FOR FREE SOFTWARE DOWNLOADS ON WEB ★ Work Smart, Play Hard, Enjoy Life! ★

    The problem is in the border. In mozilla it appears perfectly. But in chrome, there is some problem in height. Can you please help me in correcting the code and make it fit on both the browsers. I mean the border should correctly cover the banner in both the browsers. Help me, pls.

  28. Robin Hood says:

    Do you need the code for that widget. I mentioned the code in the above comment, but your site rejected the tags and put the words only. If you need the tag, how can I send it…

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here