Tuesday's Tips -Scrolling Button Widget

Have you ever wondered how to make on of those nifty little scrolling gadgets that help to keep your sidebar clutter-free?
Wondering what I'm talking about? Check it out below:

Some of my Favorite Photographers:

Clicked & Captured Photography

a story told in pictures

Expressions of His Gracce {Photography}

Farmgirl in Flip-Flops

His Creations Photography

His Light Photography

So how on earth do you make it, you ask?
Simple as 1,2,3 I say!


1.) Head on over to your blog dashboard>design tab>click new widget>select 'html/javascript' widget

2.) Paste the following code into your widget:

<center><div class="textwidget"><marquee direction="up" width="250" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()" height="250" align="center"><center>
(YOUR BLOG BUTTONS HERE)
</center></marquee></div></center>

3.) Head out to your favorite blogs and get their buttons to replace (YOUR BLOG BUTTONS HERE).
[If you want to know how to make a blog button, html code, and grab box head over to my tutorial on that HERE.]

Customizing

<center></center>

--makes your scrolling button widget centered.  You can change 'center' to 'left' or 'right' if you'd like.

align="center"

--also makes it centered, if you change the previous customization to 'left' or 'right' change this to match.

direction="up"

--controls the direction the widget scrolls, you can change "up" to "down", "left", or "right".

width="250"

--controls the width of the widget, you would want to change this to the width of your sidebar.

onmouseover="this.stop()"

--This allows the widget to stop scrolling when you mouse over it, allowing you to stop the widget so you can read the buttons without it scrolling.

onmouseout="this.start()"

--This allows the widget to continue scrolling after you mouse over it and back.

scrollamount="3"

--controls how fast the widget scrolls. The higher the number the faster it goes!

height="250"

--This controls how tall the window for the scrolling button is--so customize it for how much space you want it to take up on your sidebar.

Troubleshooting
Oh, yes. I've had several issues with this widget myself. I don't know all the reasons it doesn't work. =(  I do know that it doesn't show up in all browsers with some templates(one of which is the blogger watermark template).  The classic minima template works very well with it though. I've also had it not work due to weird button codes. (for that I suggest going through and editing the button codes so they follow this example to avoid any odd glitches)  Let me know if you come across any other errors or suggestions to make it better!

As always I'm always open to suggestions for Tuesday's Tips! =D (as a little heads up: a tutorial on block quotes and one on the sliding menu like mine are in the works...) 


Love in Christ,