3 Steps to Create Rolling List For Button Images

This post is about creating a discreet rolling gadget in the sidebar to show off your friends buttons, badges or blogrolls. The idea for this tutorial came from a question by Sheri at My Bargain Basket:

I’ve seen on another site (I wish I could remember which one) a rolling list of buttons from other sites. I would really like to do this on my site but can not find any coding to do it. Do you have any idea how to accomplish this task?

With this approach you can  a) reduce clutter b) host more buttons c) keep more friends happy d) minimize use of sidebar real estate. Not to mention you can grab buttons to your heart's content.

Warning: I'm using the marquee html tag which has a bad reputation and is officially non-standard Html.  The word marquee brings to mind the flashy structure above a movie house, announcing the movie stars.

Marquee text is distracting. The human eye is attracted to movement, and marquee text is constantly moving.

Many of us run from amateurish websites with horizontal scrolling and blinking text at the top of the pages. This tutorial is very specific, breaking the rules with care. I caution you to use this just for images. Afterall, a slowly rolling gadget may be much less distracting than a sidebar of 30 static images! Don't worry, you'll learn to control distractions.

This is how it looks in your sidebar: (stops after 2 loops so refresh page to view again)

(point to stop scrolling)

Step 1 : Add a default sidebar roller

This works for Blogger and WordPress self-hosted. WP.com  does not allow the marquee tag.

• Add a gadget or widget. For now, name it "Button Roll."
• Copy and Paste the following code --- we can change later.

  
  <div style="height:400px; width:130px;">
  <!-- Marquee tutorial by BloggingWithSuccess.net -->
  <marquee direction="Up" loop="5" scrolldelay="500" scrollamount="20" onmouseover=this.stop() onmouseout=this.start() style="height:400px; width:130px;" >
  <!-- Add button images from this point -->
  <!-- Button -->
  <a href="http://BloggingWithSuccess.net"><img src="http://i282.photobucket.com/albums/kk272/SBA_jpgs/bwstipsbutton.jpg" alt="BWS tips button" width="125" height="125" /></a>
  <!-- Button -->
  <a href="http://BPWebNews.blogspot.com"><img src="http://i282.photobucket.com/albums/kk272/SBA_jpgs/bpwebnewstips.png" border="0" alt="BPWebNews tips button" width="125" height="125" /></a>
  <!-- Button -->
  <a title="My Bargain Basket" href="http://mybargainbasket.com" target="_blank"><img style="border: none;" src="http://farm3.static.flickr.com/2473/4141638224_74733062bb_o.png" alt="My Bargain Basket" /></a>
  <!-- Insert your button images BEFORE this closing tag -->
  </marquee>
  </div>
  (point to pause scrolling)
  

• Save. The sidebar should now scroll 3 button images. You can replace these later.

Step 2: Add your clickable button images.

• Open your gadget or widget in edit mode.
  Add a marker to place your image separator , i.e.
  <!-- Button -->
  Put this before the
  </marquee>

• Open another browser window or tab to view the page with the button you want to copy.
• Copy and paste your friend's grab button code into your gadget  right after the
  <!-- Button --> you just inserted.
• Repeat for as many buttons as you want. If the button is already in your sidebar, open the widget to copy the image text. When all is well with the rolling list, just delete the individual widgets.

Step 3: Style and Adjust the Rolling Area

This tag controls the widget size, styling and scrolling speed. You will probably not have to change the defaults.

<marquee direction="Up" loop="3" scrolldelay="500" scrollamount="20" onmouseover=this.stop() onmouseout=this.start() style="height:400px; width:130px;" >

Let's break it down:

1. direction="Up" - Images will roll up. You can change this to "Down" to be different! Also 'Left" and "Right" can be used.
2. loop="5" - If you have 15 images they will scroll 5 times, then stop. Change the value or use "indefinite" to have it loop forever.
3. scrolldelay="500" - roll will jump at this speed in milliseconds. Increase to slow down or decrease to quicken.
4. scrollamount="20" - normally applies to text. 20 pixels would move each time.
5. onmouseover=this.stop() onmouseout=this.start() - allows reader to stop the rolling when mouse points to an image.
6. style="height:400px; width:130px;" - if you want a taller or shorter marquee, change the 400. the width of 130 is about the size of a button but you can widen for larger buttons. Don't go over the width of your sidebar.
   *** made the same adjustment to the <div tag which was added just for Internet Explorer.

Open your rolling gadget and edit the values you want to adjust. Save and view the sidebar. Repeat until happy!

Conclusion & Alternatives

Horizontal Rolling Images

You can do something similar for your blog's footer area using the direction="Left". Make the height fit a single button (130 px) and the width as wide as the footer can handle (100% works). Likewise if you want an even more discreet sidebar roller, limit the width to 130 and roll left.

Alternative: Manual Scrolling

If you don't want to be an Html bad girl, then use the manual scroll bars. Be warned that visitors may not voluntarily scroll your button roll.

Here's the code: We'll replace the marquee tags with the div which confines the space to hold images and displays a gray scrollbar.

<div style="width: 150px; height: 200px; overflow: auto;">
<a href= ... place images and links here...
</div>

You'll need to play with the size values to fit within your sidebar area and button sizes.

Alternative: JavaScript

Many sites provide javascript for scrolling text and images. I've found them unreliable when authors stop maintaining the external code or get kicked off their free hosting sites due to server overload. Still others require changes to your Blogger template or WP php code.  Let us know if you've found a good script.

Leave a comment when you get your list rolling so we can sit back and enjoy the show!

P.S. Sheri noticed a problem with IE, so the post was updated as of 5/24/10. There's still a problem with IE on her WP theme, but the code should work. Be brave and try it.