Tuesday, August 3, 2010

{Scrolling Buttons Box for Blogger}

Have you ever wanted one of those boxes with the scrolling buttons on your Blogspot/Blogger blog. Here is an example of one with two of our Smart and Trendy Moms Buttons:

Smart and Trendy Moms - A Resource for Reviews, Giveaways, Ideas for Moms, Handmade Items, and Trendy FindsSmart and Trendy Moms - A Resource for Reviews, Giveaways, Ideas for Moms, Handmade Items, and Trendy Finds


Since we are dealing with a widget, if you already have buttons in your widget, you will want to cut and paste that code into a text file and save it.  (You NEED a backup. Its really a pain to set up all your buttons again if something doesn't go right the first time.)

Here's how to add the scrolling button box:

AS ALWAYS BEFORE YOU MAKE ANY CHANGES, BACK UP YOUR CURRENT TEMPLATE & WIDGETS

1. Go to Layout

2. Click "Add a Gadget" in the area that you want to add the box

3. When the Add a Gadget box comes up, choose HTML/JavaScript

4. Here is the code you will paste into the box. You need to add the html for your buttons in between the two pieces of code.

<center>
<marquee direction="up" onmouseover="this.stop()" width="175" scrollamount="4" onmouseout="this.start()" height="350" align="center">

THE HTML FOR YOUR BUTTONS GOES HERE

</marquee>
</center>


In the top piece of above the button code, you can customize things:

direction="up" can be changed to control which way the buttons move - "up", "down", "right", or "left"

height="350" controls how tall the area that the buttons scroll through is - "number"

width="175" controls the width of the box - "number" (this cannot be larger than the column it is in)

scrollamount="4" this controls the speed the buttons move, the higher the number the faster they go.


I hope you enjoyed this post! Never miss a post-Subscribe by Reader or Email!
Smart and Trendy Moms finds products, ideas, projects, recipes, and other information that we have personally found helpful or interesting.  As always, it is up to you to determine what is appropriate for you, your children, and your situation.  See our Disclosure

15 comments:

Rachel said...

It is like you read my mind, I have been trying to figure out how to do this forever!!! Thank you so much!!

http://frugalformyfriends.blogspot.com

Amanda said...

I was just thinking the other day when i realized i was collecting buttons that i would love a scrolling thing but had no clue how to do it!! thanks so much for posting this!

Shopper Gal said...

I have a scrolling wheel on mine and LOVE it!!! It's a fun way to showcase my button collection :)

-Shopper Gal
http://www.shoppergal.com/

Chrissy said...

Great info!

Acting Balanced Mom said...

great info - thanks!

Haute Mom said...

I love it! Thank you! Now I can share you on my blog with others! http://kelleyhautemom.blogspot.com

Megan A said...

Thanks, I've been wanting to know!!

Misfit Momma aka Missy said...

Thank you!! I have also been wanting to know how to do this for a while!

Crystal said...

You are the best for posting this. I used to have it and somehow, it went away. Now I can get it again. ;)

CynthiaK said...

Perfect! Exactly what I need!!

Lin said...

I had always wanted to do this so thanks a ton for posting it! I've now added it to my blog :)

Isolated Existence. said...

I just added this to my blog. Thank you so much for being so detailed with the instructions!

Jackie H. said...

Woo hoo! Now I have a weekend project. I'll be sure to include your button in my scrolling button thingy.

Lulu Lane Designs said...

Thanks so much! I have just created my blog and now have to "pretty" it up! :)

Ashley Rae said...

Thanks! This is cool!

www.thefaintinggoats.blogspot.com