This 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 is adding some decoration to the site like scrolling text,etc.But,don't decorate it too much,particularly if your site contains too much text as it irritates and spoils the concentration of the reader.You can add scroll bars to tell your visitors what will be your next updates,popular posts,advertisements,etc.
So,how to add the scrolling text in your blog,let me explain it:
Adding simple scrolling text:
Here is the code to add a simple scrolling text from right to left side
The output will be like:
Example 1:
If you want some more attraction,then try these,
Add a background color to the text,
Example 2:
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.
Use the code below:
Here is are some examples:
To scroll in the 'right' direction:
Example 3:
Example 4:
To scroll in the 'up' direction:
Example 5:
Downwards:(I changed the hexa decimal codes for different colours)
few more attributes:
You can add this attribute to alternate the text
Here is the code to do this:
Example 6:
You can also set the speed of the text with this simple attribute:
The lower the scrollamount value, the less the speed it moves,
the html code for this:
example 7:(for scrollamout =2)
Example 8:(for scrollamount=5)
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 to do this
Example 9:
(place the mouse over the text to test it)
Changing the text colour:
Here is the code to change the text colour:(Add it before the marquee tag)
So, the code looks like this
Example 10:
Here is the important one 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:
Adding hyperlinks(open in the same window):
Here is the sample code:
NOTE:Replace the Link#1,Link#2,Link#3 with the text and url#1,url#2 and url#3 with the target url addresses.
Here is an example:








72 comments:
Thank you! I've been looking for this for two days. Now, how do I replace the scrolling plain text with a scrolling RSS feed?
Hi Mich,why don't you try the cool feauture provided by Feedburner.With that,your blog feed will be displayed as headlines with animations(rotating effects).To use this feauture,Sign in to your Feedburner account>My feeds(look at the top)>Click on your blog title>Publize>Headline Animator.Follow the instructions to embed that headline animator in your blog.Listen,to scroll anything...text,images,etc..you have to Put those(text,images,etc) between the marquee tags.[between marquee tags.And additionally,if you want more effects like background color,etc follow the procedure that I said in this post.
What a shitty responde, Mks. wow.
Ah thanx. So, to the next question...how do I get this to work in firefox ?
THANK YOU!!
No hablo bien ingles pero me fue demasiado util lo que escribiste MUCHAS GRACIAS!!
How to change foreground colour
my blog
http://01indianmasala.blogspot.com
Hello, mate!
I'm becoming a fan of your easy tips and stuff here!
But there's something I was figuring out on how doing at my blog and cant find it anywhere, maybe you can help me:
Is there some way to add a scroll bar on previously organized links 'sections?
I mean, applying "Vertical, On-demand Mode" srolling to Blogger's link lists.
Thanks in advance and keep the quality work ;]
[ ]s from Brazil!
Thanx for sharing such useful information. These codes would certainly help in putting some extra effects on our pages.
hi,
I want to pause my text for 10 seconds at the end of the text and then scrolls new text without stoping. Both text should come from left direction
thanks for sharing! how cxan i make it if i will use pictures instead of text?
I'd like to animate the "last posts" feature with a vertical marquee (ie last 10 posts rotate in a 5 line box).
Is there a way to customize the Blogger widget ?
Thks
thanks :)
--
gofororkut.blogspot.com
hi i've been addicted to your site, everytime i need help i run into it. anyway could you help me figure out how to make excerpts like if i have long posting i wanted to have a lik like "continue reading".. i hope i hear from you soon thanks so much
@ Hershey,
Ok.. I'll write an article about it tomorrow or day after tom,.. thanks for your love :)
whew .. that was a fast reply.. anyway try to visit my blog, i used one of your templates..
www.ourstoriesoflife.blogspot.com
How to make a scroll of images with a destination URL LINK.. please help me. Can you please look into the homepage of eblogtemplates.com There at the homepage you find an image scroller of his templates that looks realy awesome, can you post me the code??? plzzzzzz
Hi!, many thanks for providing such useful tips.Please keep publishing more tips like these.I have used your tips in my blog at http://freeworldcricketnews.blogspot.com.
Thanks again.
Hi . . . Of all the forums out there that has good info - - I can never find one that tells me the method of gettin the marquee into my signature page.
After I make the code - what do I do next? Most answers say "put it into your...", But that's the question: HOW do I put it there. Where do I save it to?
After I get the code - what is the next step and how do I perform the next step?
One forum told me to 'paste' this code in your Editor - - But what, where and who is my 'editor'?
Kleo2x@yahoo.com needs some help.
And I know I didn't state what mail system I have, but your answer should not be based on my mail system.
gracias
the "Link TO Us" at your sidebar, where you have the textroll with the code in it. to get your pic wit your link. Can you teach how to do that one. PLs I'm soo new into this blogging and love to have it in my blog.
kool stuff iam looking for such a long time..thnx
Should I something.. U rock Kranthi.. this is my 3rd post to this site...
U rock man!!!! ur work is really out of this world.. u know people problem.. what they will face problem... what queestion theyy are gaoing to ask.. u know all.. thats why u give step by step explanation.... like CBSE Board Exams.. :) just kidding.. relly hats off to u..
abhishek
reach me @ http://tradingideas.in/blog.htm
Great tool. Many thanks for this.
hi good one
hi good one
I think there is no difference between the two codes of addding hyperlinks in same windows & in another window check out
great codes. may i know,how to get box of the code when we want to posting? is like if we want to give a code in the posting,we must input the code ti box first b4 postg,how can i get the box from blog?
how do u change the colour of the text?
Thanks for the help.
thanks for the content help, i knew how to marquee but cant remember how to pause it, but now , thank u. i did it, u can have a look what your useful html code trick helped me in my site.
www.australianepal.com
and one more thing i would like to share, it works in wordpress too and in mozilaa browser too. thanks again. and best of luck, ur blog was in first row when i googled.
very usefull post thank you very big
dear Kranthi
A LOT OF THANKS FOR IT !!!
Hay
Thanks
manny manny thanks
'Now i the secret'... ; ) Thanks..
and...ho do I put the scrolling effect to the actual tittle of the blog??
where should i add the above link u have not given brief idea so pls help to scroll text
nice i liked and also add this feature on my blog, but u did not metion the pop-up style etc.. or may be we called it blink-blink eyc...
How can i add more than one sentence and have them alternate?
how to add scrolling text blog title please help me
thnx for this tuto
hope you ll fix something in what you wrote about changing text colour!
also how i can post a text with title in different colour from the text! hope helping me
thnx
Thanks sir for providing the information
are you man like us
i dont so
your are icrediable
what is thise
its very very very important information
your are ............
i leave vistors to speak about u
make mony ,, whhats the matter? wich person bothered you to make all this noise.
g888888888888
Hello Mate
u r just incredible
as i m newbie
i m trying all ur tutorials on my blog http://spaartan.co.cc
if u have any suggestion regarding improvment of my blog then kindly let me know
thnx bro
I have picture which I want to use as a background for writing messages. How do I do it? Please mail me to
hot.bellsteven@yahoo.com
wow very exciting.I want try it
http://registry--editor.blogspot.com/
this is very good tutorial thanks for sharing it.
I love this scroller-Question:How do i make a 2 line space in the scroller between announcements?
Thanks to whoever can answer this!
well that was really very handy,Thanks guys
www.2009ipl.blogspot.com
Thanks! But can you also add one on how to resize the ticker?
opening a hyperlink in new window, i think u should make some changes to the code... it didn't work correctly
helppp me!!!!
i want the text to be at the left of the page not at the right, under the links column what should i do to move the text from right side of the page to the left side of the page??
pls reply asap
Thank You v.m.
I've recently had the template to my blog changed to have two sidebars with posts in the middle. I had to change my resolution to 1024 X 768. I have also added more memory. My Scrollbar will not work. Any suggestions?
Great resource. Thanks for sharing.
@anonymous:
when you want a space. So for two lines
Many thanks for taking the time to develop and share this superb tool.
thank you. It really works......
it so cool, but how to change the color of text??
thanks for your marquee tips
Great tips, TNX!
thank you....good
thank you very much
I think this suggestions are antiquate. Professionell Webdesign doesn't use such elements any more. Then it's better to take FLASH for lower animations.
Hi Kranthi!
Thanks for the this blogging tip. However, I cannot change my marquee text colour into white colour. I already follow your step, but it still appear as black.
Can you help me on this!
Johan,
http://finance-based.blogspot.com
Opps! sorry Kranthi, my blog url is : http://finance-base.blogspot.com.
hope you can help me on my problem!
thank you ... working terimakasih sauklaaa
Hi there... :)
I bumped into your blogs while searching how to do a marquee. Thank you so very much. I've fun enhancing my blogs. However, I tried many times to chance the font colour using your codes but failed miserably. After some research, my problem solved. I think you ought to make admendments to it so can help more blur people like me.
Correct code:-
span style="color:#ff0000;"
Thanks a lot! Cheers!
Hi,
I have created a blog and have used marque for notification purpose. To make it more challenging for you, would you be able to make a flashy text i.e instead of moving up down left right - could the text have a changing colur for a change. The text color change for a preset interval like from green to yellow to red etc and back again to green. Have you got this sort of code - if you have - care to share... Have a nice :) day
Thank U very much buddy I'm very much impressed by your tips
http://readaebook.blogspot.com/2010/05/beginning-html-xhtml-css-and-javascript.html
read more about HTML
how to make random scrolling text in a circle or ball shapes?