Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Jun 5, 2007

Digg This Story

Scrolling Text - Marquee HTML Code

This HTML term Marquee is used to create a scrolling or sliding text. The text can move across the screen horizontally or vertically at a certain speed determined by you. Note, however, that while it looks nice to have scrolling announcements, advertisements, quotations, or links, having too much animation in your Blog may distract and irritate your readers. We had earlier created a line of scrolling text in the Header of our Quotes Blog to let you have an idea what you can do for your Blog. Also, animated tags like this are not W3C-compliant. Microsoft came up with the marquee tag and while most browsers support it, W3 did not accept it. We shall be discussing this in later articles on CSS3 and JavaScript alternatives.

For this tutorial, we begin with a short explanation of what the attributes do before giving you examples of how these attributes can be applied.

Marquee Attributes

behavior="scroll"
behavior="alternate"
behavior="slide"


This defines how the text will move. The default is Scroll. If the behavior is not specified, the text scrolls by moving from one end to another. Where the behavior is Alternate, the text will move back and forth. The Slide seems to have the same effect as Scroll in Firefox browser. In Internet Explorer, the text under Slide may move to one end and stop.

direction="left"
direction="right"
direction="up"
direction="down"


The default is "left", meaning that if no direction is specified, the text will move from right to left.

loop="3"


This sets the number of times the marquee will scroll. For example, in Internet Explorer, if the number is 3, the text will scroll 3 times and stop. This command might be ignored by Firefox and the text continues to scroll. For both browsers, if no value is specified or if this attribute is omitted, the marquee will scroll or loop continuously.

scrollamount="1"


This is the amount of scrolling (in pixels). If the number is 1, the text moves by 1 pixel each time and therefore scrolls at a slow pace. If this attribute is not stated, the default value is 6. The higher the number, the faster the text scrolls.

scrolldelay="100"


This is used to set the interval between each scroll movement in milliseconds. The default value is 85. Here, the higher the value, the slower the text scrolls. A value that is smaller than 60 would be ignored and replaced by the value 60. In Internet Explorer, if you really want the text to zoom at lightning speed, you can set a small delay like 20 and specify the truespeed attribute as true (see below).

truespeed="true"
truespeed="false"


This tells the browser whether or not to stick to the scrolldelay values lower than 60 that you have set. The default value is false and the browser will ignore values less than 60. Set it as true if you want the browser to adhere to the low scrolldelay value and have the text scroll very fast.

bgcolor: rgb(255,0,0)">#XXXXXX"


Should you want a background color for the scrolling text, you can specify the color code into #XXXXXX. You may refer to the HTML Color Code Chart for the color codes.

height="50px"
height="80%"


You can specify the height of the marquee box in pixels or percentage value. The default value is the height of the contained text.

width="200px"
width="80%"


Similarly, you can set the width of the marquee box in pixels or percentage value. The default width is the width of the frame that the marquee appears in.

vspace="20px"
vspace="80%"


In Internet Explorer, you can set the top and bottom margins outside the scrolling text by stating a vspace (vertical space) margin in pixels or percentage value.

hspace="20px"
hspace="80%"


You can also set the left and right margins outside the scrolling text by stating a hspace (horizontal space) margin either in pixels or percentage value.

Where to place the marquee code

You can place the scrolling text either in your Header, Footer, Sidebar, or blog post.

To have it above or below the Header or Blog Posts, see that you are able to Add Page Element in the Header and Post Body.

Go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript to add the marquee code.

If you want the text to be in your Posts, just like what you see in this post, see that you are in the “Edit HTML” mode and not “Compose” mode when you add the marquee code.

Marquee HTML Code

The basic code to add is this:-

Example 1


<marquee bgcolor="#ffffcc">Text scrolls from right to left by default.</marquee>


Text scrolls from right to left by default.

Notice that by default, the text scrolls from right to left, and it loops continuously. You can of course change the background color by specifying the Hexadecimal color code under bgcolor.

Further Examples of the Marquee code, applying the attributes discussed above:-

Example 2

<marquee behavior="alternate" width="80%" bgcolor="#ffffcc">Bouncing text using the alternate behavior.</marquee>


Bouncing text using the alternate behavior.

Here, the text bounces from one side to the other and the width of the text box has been reduced to 80%.

Example 3

<marquee scrolldelay="150" direction="up" width="300px" height="100px" bgcolor="#ffffcc">Text scrolls upwards.

For the text to appear in the next line, add this tag <p></p> after the previous line.</marquee>


Text scrolls upwards.

For the text to appear in the next line, add this tag <p></p> after the previous line.


The scrolldelay has been set at 150. Increase this value if you want a slower speed.

Example 4


<marquee hspace="50%" direction="down" scrollamount="2" height="100px" bgcolor="#ffffcc">Text scrolls downwards.

For the text to appear in the next line, add this tag <p></p> after the previous line.</marquee>


Text scrolls downwards.

For the text to appear in the next line, add this tag <p></p> after the previous line.


In this example, we use scrollamount to control the speed. The higher the value, the faster the speed. In Internet Explorer, you will see the left and right margins set under hspace.

Change Font style and Color of text

Notice in the above examples that the text is black. If you want a different color or style for your text, you can set the style of the text before the marquee code. Here are some examples:-

Example 5

<span style="color:#F6358A; font-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#333333">Text scrolls from left to right.</marquee></span>


Text scrolls from left to right.

What we have done here is to specify a color for the text. You can look up the Color Code Chart for more colors.

Example 6

<span style="color:#6AFB92; font-size:xx-large; font-family:fantasy; font-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#333333">Text scrolls from left to right.</marquee></span>


Text scrolls from left to right.

You can set the font-family for the text. It can be a generic font like cursive, serif, monospace, fantasy and so on. It can also be a specific font family like times, arial, courier, verdana, etc. You can state the font-size as xx-small, x-small, small, smaller, xx-large, x-large, large, larger, or a percentage value.

Update:

Pause/Stop and Start a Scroll

Readers have asked whether the scrolling text can be paused when a visitor moves his mouse cursor over the text. This is useful when he wants to read the text or click a link with the text. To start and start a marquee, the additional arguments used are the "onmouseover" and "onmouseout" events to add a simple JavaScript. It will pause the scrolling text when the mouse is over it and resume the scroll when the mouse leaves the text.

Example 7

<marquee bgcolor="#ffffcc" onmouseover="this.stop()" onmouseout="this.start()">Text scroll pauses when the mouse hovers over it and starts again when the mouse is moved out of the text.</marquee>


Text scroll pauses when the mouse hovers over it and starts again when the mouse is moved out of the text.

Scrolling Link List

If you are interested in having a Scrolling Link List, we have explained how you can do it in our article on Numbered List and Bulleted List.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

35 comments:

HSI Pictures said...

Hello
Very interesting.
How would you insert links to your articles, so people can acces to your older posts within this scroller.
thank you in advance
chris

bizwhiz said...

Hi HSI Pictures

Are you familiar with HTML for links - "a href" tags? You can insert them amid your text or in place of the text.

If you know the HTML for ordered or unorder lists ("ul" and "li") tags, you can also add them into the text. We shall probably come up with an article on the HTML for link lists.

bizwhiz said...

We have now a section in our article Numbered List and Bulleted List explaining how we can include links within the marquee and scrolling tags.

Anonymous said...

this is very nice. Is there actually the possibility to make the scroller stop for some time? meaning: the text scrolls and appears completely on the screen, then waits a few secs, then starts scrolling again, leading to the following text.
thanks
giulia

bizwhiz said...

Hi Anonymous

It can be done using Scripts. Since we are only talking about using HTML to scroll the text in this article, we have not covered that. Perhaps we'll write about it in future.

Hathor said...

How can I start the scrolling immediately after the page loads? It will only start when I mouse over. I have s slow connection and when the download was complete the pare resized and the marquee didn't work again.

bizwhiz said...

Hi Hathor

If you see the scrolling text in the Recent Updates in our left sidebar (inserted using Page Element) or the examples in this article, the scroll starts upon page load and not mouseover. The slight delay caused by the page load time should not change or affect the code. Try with some of the codes given in our examples and see if they work for you.

Nihar said...

hi bizwhiz,

I have added the same in my blog in the sidebar. but strangely enough the text is not scrolling. i am using the minima template.

will be grateful if you could check my blogs page source and let me know the problem.

http://thinkersonmove.blogspot.com

Thanks,
Nihar

bizwhiz said...

Hi Nihar

You added a lot of other styles to that widget too. Why don't you try taking out the marquee part and pasting it into a new HTML/JavaScript page element and view it.

L.I.S.T. said...

Hi,
I think your blog is the best thing ever, I started blogging and I like to try out new ways of doing things. I added extra page elements and now I have added scrolling text. My question is how do I change the color of the text, you talk about it but I could not see any code for it, there is code to change the font to bold/italic and changing the background color am I missing something. Thank for any help proved
Newblog51

bizwhiz said...

Hi L.I.S.T.

Some bits of the code went missing. We have re-inserted that missing code. Thanks for pointing that out.

ukmad said...

very nice blog. u are doing not a good job but a very nice job i dont have words to praise you. may the lord grant you all your wishes.
keep up the good work man.

I have a small problem on my blog
http://belgaumblog.blogspot.com/
there is a marquee but its color is not matching with the background color how do i know my background color, i tried in edit html seeign the source but i wasnt able to match the color.

bizwhiz said...

Hi ukmad

Try leaving out the bgcolor. Just use the code and enter the scrolling text.

ukmad said...

yes thanks it worked correctly as i wanted it. background color went off. thnx again man
may god bless you a lot

Seasons said...

Your blog makes life sooooooooo much easier!! :)

Thanks a million
-Seasons

MK said...

Ok, I am really brand new at this where do I actually put the code for this. What spot exactly in my template? I would like to put it to the right of my jpg in my header

admin said...

i want to scroll some images instead of text n link some old posts can u help me...

Anonymous said...

THANK YOU, THANK YOU, THANK YOU, THANK YOU. YOU ARE THE BEST OF THE BEST OF THE BEST !!!

Chris said...

I have been looking for this
Thanks and Aloha!!!

Chetan said...

thanks for the posts.... its really simply and easy to understand.

do u hv any other blogs?

Dette said...

Loved it!! I copied the code for the marquee and it worked beautifully.

Thanks SO much!

Nikki said...

Thank you so much for your awesome blog! I have had tons of fun in the last couple days learning how to create bullet lists and scrolling text and extra columns, etc!

Sex Stories said...

Hi Bizwhiz
I have made a marquee. But it is not scrolling smoothly. You can see it on http://only-sex-stories.blogspot.com/
. How can I make it smooth like the marquee on http://www.111card.com/ (News and Update section)?

Anonymous said...

thanks a lot for the info.. was on google for the same! :)

The Herd said...

Thank you soooo much!! I really appreciate your help! Everything worked!

Henry said...

hey.

really good tutorial.

but about the pausing one, when mouse over.

i've tried using this on my myspace.

doesnt seem to work.
just acts like a normal marquee tag.

im not very expeirenced with html, css and so on, so might just be me doing something wrong.

can you help?

henry

nabink said...

This is one of the most useful blog!

Great!

Thanks for sharing.
dai

Anonymous said...

hi bizwiz: this is great and i am using it on my blog...but is there a way to "restart" or repeat the text line before the text completely leaves the scroll window? i would like to have the scroll look more like the news scrolls at the bottom of cable news channels...have the text continuously scroll, possibly with a logo separating individual entries...any ideas?
thanks, dewey

almerl3 said...

Great code but I have a page load problem. I see the entire list of scroll lines during load. The page arrangement is completely changed until the page finishes loading then everything works fine. Looks bad. Any ideas? www.dayav.com/index2.htm to see for yourself. I use Firefox, Frontpage and WinXp
Thanks,
Allen

Tandr Games said...

this is a great tip

Partho said...

I tried your code. It works fine, except for one small hitch. See, I want to show some scrolling song lyric on this pane, but the text is appearing as continuous text without line breaks. How to incorporate line breaks?
Thanks a million.

Nithin said...

Hi This is Nithin....Hey i have followed your article of scrolling text...and made it as ...scrolling of images...It was simply superb...but i want to add background picture for it can u help me please...:)

You can see my scrolling images here:
www.mydownloads4u.blogspot.com
or
www.pcgameslinks.blogspot.com

I hope you would add my idea to your article...i.e scrolling of images linking to some url as i did...many bloggers like me would find it helpful...:)

Anonymous said...

Fine post. I learned some new and interesting options of marquee. Thanks!

Jhaedelle said...

Hi!
I think this is very cool!
But i can't put it on my
friendster acc. [ i'm using internet explorer ]
i wanted to use the ALTERNATE
bahavior of marquee but
it dont appear on my fs.
How can I put it there???

Hope u can reply!

Mohammad Mustafa Ahmedzai said...

hi bizwhiz!
I need your help. I have created a new blog using TWO CHURCH TEMPLATE. I know pretty good when it comes to adding marquee effect to text. But I don't know whats wrong with this template, despite trying several times, the text isn't moving on my blog though it moves when I preview the post in Windows Live Writer. Plz help me!

Here is my blog, plz check it