Pin It

How To Make a Scrolling Sidebar Widget



Ever wondered how people make a scrolling sidebar widget? They are a great way to de-clutter and organize your layout while still promoting your blog friends. It’s actually pretty simply to make- here’s How:

1. Decide on which buttons you want to use.

2. Copy the HTML from the button codes into an easy to find list. Be sure to place spaces between the button codes so you can easily tell them apart.

3. Go to your page elements page, then click ‘add gadget’ and then go to HTML/Javascript.

4. Now click download and copy the text file into your page element.

DOWNLOAD

5. Now place all your button codes in the place where it says *PUT YOUR BUTTON CODES HERE* If you would like to add more buttons, just add the button code to the list. Now save it.

There are a few things you can customize in the code- if you need:

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
width=”175″ controls the width of the box – “number” (this cannot be wider than the column it is in- you will see if it’s too wide- if so reduce the number and that should take care of it)

scrollamount=”4″ this controls the speed at which the buttons move, the higher the number the faster they go.

Do you have any ideas for tutorials? Please let me know- I would love your ideas!

Don’t forget to check out the blogs of the week- YES this week there is more than one free template for our readers to download! Click the image to download:

Comments

  1. Kristine says:

    Thanks!

  2. Evelyn / 2 Pequenos Traviesos says:

    Lena, Lena, Lena… Have you been reading my mind? Yes, I was trying to figure out how to do this. But it was taking me too long so I quit. I really appreciate your tutorials. Jody and you have been helping me organize my blog without even knowing it.
    THANKS

  3. Valerie @ Frugal Family Fun Blog says:

    Cool tip! I can't believe you started this blog just two months ago! Way to go, you two! :-)

  4. Evelyn / 2 Pequenos Traviesos says:

    Hey Jody! I tagged you to play a little game. Sorry for getting you involved, haha!
    Hugs from PR
    Here’s the link:
    http://2pequenostraviesos.blogspot.com/2010/04/6-cositas-sobre-mi-6-things-about-me.html

  5. yay! i was thinking of doing this and now, i know how!

    shuttling in from SITS :)

  6. The Sunshine Crew says:

    Thanks, Lena. I was able to follow the directions and now have a scrolling button list on my blog.
    Happy Monday!

  7. Mama to 3 Blessings says:

    thank you – I was able to do it! Yeah now I freed up space!
    :)
    Nicole

  8. Thanks for the tidbit!

  9. Lizzie Ann says:

    Thanks Lena! I've did a short blog about this tut!
    http://www.housekeepinginprogress.com/2010/04/awesome-tutorials.html

  10. Jessica Anne says:

    Thanks! Made my sidebar much less busy, and I added your button while I was at it. :)

  11. JDaniel4's Mom says:

    This posts was selected and featured as one of my great posts this week. Here is the link: http://www.jdaniel4smom.com/2010/05/great-posts-i-came-across-this-week-may_29.html

  12. Belly Charms says:

    Thank you!!! I am a new follower and found this post by Blog Frog. Thanks for posting.

  13. LaVonne says:

    I did it, I did it! Thank you. It was easy.

    Blessings!
    LaVonne

    Long Wait For Isabella

  14. CardioBunny says:

    I looked all over the place for this earlier today but could not find it. I happened to come across your blog while looking for new ones to follow and here is a tutorial! Thanks for sharing :)

  15. Country Wife says:

    I have been trying for 2 weeks, missing sleep, skipping meals, ignoring children (LOL) to try and get this to work. every widget I found on the net just didn't work right. Simply put….You Rock!

  16. Hello,
    I have been trying for a while now to make a slide show with all my blog buttons on, but for some reason I just can’t figure it out. If you could help me It would be greatly appreciated. Thanks for your time and hope you can help :)
    Blessings,
    ~Kelsie-Anne~

  17. You are amazing! Thanks so much for this. More powers to you!

Add Your Comment

*