1.30.2011

How to have scrolling text/a scrolling image on your blog

Hey!
So recently I was checking thru the comments and I saw this one tutorial request that fruity sent to me.


Here's an example of what I think she means:

smile


This is called a Marquee Scrolling Image. There's also scrolling text, such as this:

Twolegers Chobots Blog... WHEEEE I'M SCROLLING IN SOME DIRECTION


Today I'm gonna show you how to do both of these.

Scrolling Text

This is the code to doing the text:

<marquee behavior="scroll" direction="left" scrollamount="5">Put anything you want here!</marquee>

 So, you can also totally customize this code :P

Obviously you can change the "Put anything you want here!" to ahem... anything you want actually.

You can also change the direction to down, right, up, alternate (like bouncing back and forth) and some more i think...

JUST DON'T REMOVE THE QUOTES (")!!!

You can also change the scroll speed by changing the 5 in the scrollamount area to any whole number between 1-100. I'm pretty sure it can outgo 100 though... You'll just have to experiment that to find out!!
 Scrolling Image

What you'll have to do for this is first of all, find an image to use.
If you're using your own image be sure to upload it to Tinypic or Photobucket or some other image hosting site!

Here's the image I'm gonna use for this, uploaded to Photobucket:

http://i868.photobucket.com/albums/ab244/aalexa555/logo.png
Now, copy and paste the code below in Notepad or something:

<marquee behavior="scroll" direction="left" scrollamount="5">
<img src="/urlgoeshere" alt="HELLOOOO" />

Some things to change...

1. You can choose to change the direction if you want. (choose from: left, right, down, up, alternate)
2. Change the "/urlgoeshere" to the url of your image. KEEP THE QUOTES!
3. Change the scrollamount to anything you want. A whole number from 1-100 please! I would suggest keeping it at 5 though.
4. Change the HELLOOOO to anything you want. This message will be shown if your reader puts their mouse over the image.

So, this is my final code:

<marquee behavior="scroll" direction="right" scrollamount="10"><img alt="HELLOOO" src="http://i868.photobucket.com/albums/ab244/aalexa555/logo.png" /></marquee>

With that being said, here's my final product:

smile
Awesome!

You can also totally customize the marquee font. I suggest using this website for customizing this. (Also check out the rest of the site for some awesome blogging techniques!) Although there's not much to do when it comes to customizing the scrolling images.

Anyway, thanks for reading :)

Until Next time...

Alexa

8 comments:

  1. Whuuu
    I did what you said, but it doesn't work .. :Z

    ReplyDelete
  2. WOOP!! THANKS!! THIS IS SUPER HELFUP!! :DD

    ReplyDelete
  3. @xCookieCakex

    You sure it didn't work? maybe you didn't copy the code right or smth

    ReplyDelete
  4. Heyyy!
    It doesn't work in my posts :P
    I Copied It Right..I Did Everything Right.
    HTML's hate me xD

    ReplyDelete
  5. @Gymore
    did you attempt to do the scrolling image or text? :P

    ReplyDelete
  6. Where do you put the code to change the font size?

    ReplyDelete
  7. how did u make ur scrolling text

    ReplyDelete

Thanks for commenting! ^_^

Home Tutorials Freebies Our Favorite Blogs