7 January 2013

Add Marquee on Your Blog


scrolling textThis post explains you how to add Scrolling text(also called as marquee)to your blog sidebars,blog posts,etc.Another way to attract the visitors into your site by adding this  scrolling text,etc.But,don't decorate it too much,particularly if your site contains too much text as it may irritates and spoils the concentration of your blog reader.You can add scroll bars to tell your visitors what will be your next updates,popular posts,advertisements,etc.I guess already saw that on several sites but don't know yet how to add this.So,how to add the scrolling text in your blogger blog,let me explain it for you.

 Must Read Linkwithin Related Post Widget

Marquee Attributes

behavior="alternate" --> The attribute alternate allows you to move your text, link or images back and forth.

behavior="scroll" --> The attribute scroll allows you to define how the text, links or images will move.

behavior="slide" --> The slide effect in Firefox browser works similar as to scroll attribute, but in Internet explorer this make and effect on moving your text, links or images to an end stops.
direction="left" --> This attribute defines the movement of your object from right to left.

direction="right" --> This attribute defines the movement of your object from left to right.

direction="up" --> This attribute defines the movement of your object from bottom to up.

direction="down" --> This attribute defines the movement of your object from up to bottom.

scrollamount="1" --> scrollamount attribute defines the scrolling speed.

scrolldelay="100" --> scrolldelay attribute defines the time gap between each scroll movement, and is defined through milliseconds.

loop="5" --> Defines the number of times the marquee or the looping will occur and then stop.

marquee bg#cc0000">#xxxxxx" --> This attribute defines the background color of your marquee object.

height="100px" --> The height attribute allows you to define the height of your marquee effect, and this can be set with pixels or on percentage values.

width="100px" --> The width attribute allows you to define the width of your marquee effect, and this can be set with pixels or on percentage values.

Now we have learned the attributes of marquee, and now let us see some samples of these atttributes when implemented.

  • Example 1 on Marquee



This example is tested working using no attributes, but then it still moves from right to left using its default direction and behavior attribute.
  • Example 2 on Marquee

<marquee direction="left" scrollamount="5" width="100%">TechTrickHome.blogspot.com</marquee>


This script work as the same effect applied to marquee example 1, defining its attributes. And also remember that this marquee effect can be changed from its direction, its scrollamount speed and etc.
  • Example 3 on Marquee

<marquee direction="right" scrollamount="3" width="100%" behavior="alternate">TechTrickHome.blogspot.com</marquee>


Here in this example we have used one of the behavior attributes making the text to move back and forth.

  • Example 4 on Marquee

<marquee align="center" direction="up" scrollamount="3" scrolldelay="100" width="100%" height="100px" bgcolor="#ffffcc" behavior="scroll">TechTrickHome.blogspot.com</marquee>


This script allows you to align your marquee your objects in the middle, allowing your direction from bottom to up, having a background color with its behavior changed to scroll.
  • Example 5 on Marquee

<marquee align="center" direction="up" scrollamount="3" scrolldelay="100" width="100%" height="100px"> <a href="techtrickhome.blogspot.com">TechTrickHome <br/> <a href="www.google.com">Google</a><br/> <a href="www.blogger.com">Blogger</a></marquee>


This script will allow you to make a marquee link list scrolling from bottom to up.
  • Example 6 on Marquee

<marquee align="center" direction="up" scrollamount="3" scrolldelay="100" width="100%" height="100px" bgcolor="#ffffcc"> <a href="http://techtrickhome.blogspot.com/"><font color="green">TechTrickHome</font></a><br/> <a href="http://www.google.com/"><font color="red">Google</font></a><br/> <a href="http://www.blogger.com/"><font color="brown">Blogger</font></a></marquee>


In this part of the code your able to add marquee of links with a background color and also color to your fonts.
  • Example 7 on Marquee

<marquee direction="down" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%"> TechTrickHome.blogspot.com</marquee>

In this piece of code your adding two functions one is to stop on mouse over to the marquee object and another function to start the marquee effect again on mouse out of your marquee object.

  • Example 8 on Marquee

<marquee align="center" direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" width="100%" height="100px"><a href="www.techtrickhome.blogspot.com"><img src="http://i75.photobucket.com/albums/i315/teddygross/Buttons/blogger_logo.gif" alt="how to add marquee effect"><a><br/> <a href="www.google.com"><img src="http://www.tutorial5.com/tutorials/google-adsense-allowed-sites/google.png" alt="how to add marquee effect on images"></a><br/> <a href="www.feedburner.com"><img src="http://aux.iconpedia.net/uploads/1182855391.png" alt="images marquee effect"></a></marquee>

 how to add marquee effect
images marquee effect

Here in this example marquee effect has been made on images instead of text or link, and also followed by link.

  • Example 9 on Marquee

<style> .text { color:#FF0000; font-family:verdana; background:#ffcc00; padding:5px; } </style> <div class="text"> <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Welcome To TechTrickHome</marquee></div>

Welcome To TechTrickHome

Here is our final marquee text example

If you have any doubt,use the comment box below to ask.

Articles You May Like

16 comments: Leave Your Comments

  1. oooh coool!!!! I want to make something like this! Does this work on Wordpress too?? I want!!!

    1. Yes,It is.I'll surely post one about wordpress.Till then keep visiting. :)

  2. Nice Article.

    Having Marquee in blogs make it attractive for visitors. You hve explained so deeply step by step where everyone can try it.

    Can you tell how to have these Marquee kind of things in Wordpress Blog.

  3. This is a neat trick for websites.

  4. Oh nice! I'm gonna try this one out. Thanks for sharing!

  5. Another intereting add-on. Thanks for all this informative tutorials!

  6. Very very Thanks..... My search ended here....

  7. hello.i really appreciate it,kindly check it on my site www.kashmoneyblog.blogspot.com,plz i want you to add on messenger through this id (ammarshal001) cos i av something to discus with you privately and its very important.thanks for your support

    1. you can use the contact page for any such discussions.

  8. great but i want to set marquee to my labels or posts www.newz2012.blogspot.com

  9. thank you bro, i am continuing to improve my blog and i will link your blog to mine, very good blog and thorough

    1. you're welcome buddy and thanks for liking and supporting us.

  10. thanks for sharing bro. Please tell me how can share posts as 'headline news' at top of the blog. at: yogeshguptarohtakDOTblogspotDOTin