Tuesday, November 13, 2012

Blogging Design ~ Lesson #1 ~ Scrolling Button Box

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' that is available for 'grabbing' from their home page to add to your blog.  (I have two on my sidebar for Pretty Purplexing and Aunt Tami's House).  Some blogs have separate pages dedicated to these buttons, others will put them in their sidebar.  Another option is to put a rolling gadget in your sidebar.

It is extremely simple to do once you have the HTML code.

THE CODE:

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


Now, what to do with this code.  Let's break it down so you can understand how it works.
  • direction="up" ** this determines the direction the button scroll.  You can have it scroll up or down.
  • height="250" ** this determines how tall the widget is.  Most blog buttons are about the same size, thought not all.  You can change it to a higher or lower number to suite how many you want to be seen at once.
  • scrollamount="5" ** this determines the speed at which it moves.  Lower the number for a slower speed.
  • width="160" ** this determents 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.

In the Blogger Layout Menu
  • Choose "Add a Gadget"
  • Choose "Add the HTML/Java Script"
  • Paste the HTML code from above.
  • Visit the blog you want to add and find their button code. Copy it.
  • Enter the button code after <div aligh="center"> and before </div>
<center>
<marquee align="center" direction="up" height="250" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="160"><div aligh="center">
ENTER HERE
</div>
</marquee></center>

  • To add a second button, just place it immediately before or after the first button code.
    • It's best to leave a space or two before and after each 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.

  • You will notice that once all the buttons have gone thru - it is blank for a short time and then they begin again.


  • You can check out my Scrolling Buttons on my sidebar. Have fun with it and Good Luck!
    Photobucket

    No comments:

    Post a Comment