Facebook Twitter Contact Us RSS Feedburner Pinerest
banner ad

{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

About the Author

Jennette is mom to three adorable kids, and has been married for 7 years to the love of her life. Her husband and kids are her world and the inspiration for most things in her life. Her hobbies are sewing, blogging, cooking, crafting.

Comments (15)

Trackback URL | Comments RSS Feed

  1. Rachel says:

    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

  2. Amanda says:

    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!

  3. Shopper Gal says:

    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/

  4. Chrissy says:

    Great info!

  5. Acting Balanced Mom says:

    great info – thanks!

  6. Haute Mom says:

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

  7. Megan A says:

    Thanks, I've been wanting to know!!

  8. Misfit Momma aka Missy says:

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

  9. Crystal says:

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

  10. CynthiaK says:

    Perfect! Exactly what I need!!

  11. Lin says:

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

  12. Isolated Existence. says:

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

  13. Jackie H. says:

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

  14. Lulu Lane Designs says:

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