Wednesday, May 6, 2009

How to Add a Scrolling Feedback Marquee

On my other blog, I have a scrolling marquee at the top that I use to show off my feedback from my studios. A few people have asked me about how to do this, so I'm going to share the code here. But first, you need to decide what you want to use your marquee for. You can type anything you'd like in it, but it helps to have that text ready before you try to paste the code. It's not a hard thing to create, but it's a little time consuming, so just be warned! (If you're going to use your feedback/kudos like I did, it helps a lot to copy and paste each one into one new list before you begin. Just use Word or any sort of notepad software. It doesn't need to be fancy right now. This will save you a ton of headaches later!)

Once you know what you want your marquee to say, just follow these steps:

1. On your blogger dashboard, click "layout"

2. On the top of the layout, click "Add new gadget" and choose the "HTML/JavaScript" option.

3. Paste the following code into the box:
<font color="#ffffff" align="center"><marquee behavior="scroll" direction="up" onmouseover="this.stop()" width="900" onmouseout="this.start()" scrollamount="1" height="50">text goes here</marquee></font>

4. Replace the yellow words with your text you've already pre-prepared.

5. Right now, what you'll have if you save this is a whole bunch of sentences that are strung together with no breaks in between. If what you posted is not a paragraph, but rather a list of statements that need breaks, you're going to have to add a bit more code. (If you do not need these breaks, skip to step 7.)

6. To add line breaks to your marquee, copy and paste this after every sentence:


7. To italicize any words in your text, copy and paste this code around the text needing formatting:
(like this: <i>these words need to be in italics</i>)

8. To make words bold, paste this code around the words:
(like this: <b>these words need to be in bold</b>)

9. (Right now, because I used the code from my own blog, the font is in white. If you like the white font, skip this step.) To change the color of the font in your marquee, find the part of the code that looks like this:
<font color="#ffffff" align="center">
Go here, and find the code that relates to the color you want your text to be. Replace the yellow letters above with that code.

10. Once you've made all the changes you need to make, hit save. Be sure you drag and drop the new gadget below your header, or you may not be able to see it! (You can also hit save along the way and preview your marquee. You are always able to go back and edit the code to get it just how you want it.)

There are lots of other cool things you can do with your marquee, but for now, we've covered the basics. If you want yours to do something I didn't cover, please let me know and I'll see if I can show you how!

*A few notes about this particular marquee: It's only written to fit across the width of your page. You can put it anywhere, but it will take up the whole width of the page, so it's best on the top or bottom of your page. Also, it has a "stop on mouse" function. This means that when you hover over it, it will stop scrolling. If you don't like this, let me know and I can tell you how to change it!*


jennuinecandles May 24, 2009 at 9:42 AM  

I definitely agree that having your text ready to go is the easiest way.

Label Cloud

Powered By:Blogger Widgets

  © Blogger templates ProBlogger Template by 2008

Back to TOP