Blogging 201 ~ Lesson #7: Designing a Scrolling Blog Button Box with HTML

As you begin to interact as a blogger with other bloggers you will find many whose blogs you want to share with your readers.  Most bloggers have a blog button banner  that is readily available for "grabbing" from their home page to add to your blog (see mine in the sidebar
and below).  You may use these in posting an introductory or guest post about their blog as I did in these posts introducing The Aldi Spot and Clip With Purpose at Simply CVS.  You may also want to add them to a blog roll as we discussed earlier.  Another option is to put a rolling gadget in your sidebar.

I added one of these in the sidebar here for you to be able to see.  I also have it in the bottom of this post for you to see.  I have included a few of the great bloggers I have met while blogging at Simply CVS.  It is extremely simple to do once you have the HTML code with which to do it.  You will notice that that once all the buttons have gone thru it is blank for a short time and then they begin again.    The code is:

<center><marquee align="center" direction="up" height="250" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="160"><div align="center">
</div>
</marquee></center>

Now, what to do with this code.  Let's break it down so you can understand how to specialize it for your own application.

Ways to change the looks of the scroll box.  You will want to put up the box and then edit it to try different settings.

• direction="up"-- this determines the direction the buttons scroll.  You can have it scroll up or down.
• height="250"-- this determines how tall the widget it.  Most blog buttons are 125 x 125, though not all, so a height of 250 px will allow two be seen at once.  Change it to a higher or lower number to suit how many you want to be seen at once.
• scrollamount="3"-- this determines the speed at which it moves.  Increase the number for a quicker speed.  You can also use decimal points -- 2.5 for instance.
• width="160"-- this determines the width of the gadget.  Most buttons are 125 but many are 150.  You want it large enough for the buttons to be seen but small enough to fit into your sidebar.

How to add the button codes.

• Visit the blog you want to add and find their button code.  Copy it.
• Enter it after the "center"> and before the </div>  
• <div align="center"> ENTER IT HERE  </div> </marquee></center>
• It is best to leave a space or two before and after the entry.  It will not affect how it looks, but it will make it easy to find if you want to change the order or if you want to remove one.
• To add a second button, just place it immediately before or after the first button code leaving a space or two for ease in finding it again.

Uses for the scrolling button widget.

• Blogrolls of your favorite blogs.
• Blogging buddies.
• Blogs that will help your readers find more of the types of information you share on your blog.
• Blog linkies you link up to regularly (see Nurturing Cuisine's use of it this way).

Adding it to your blog.

• Copy the code above and add your button codes in the correct place.
• Add it as gadget in your side bar with HTML code option.