Friday, February 18, 2011

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">

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.


Clip With Purpose

Weekend Bloggy Reading

Nurturing Cuisine


Life In The Thrifty Lane said...

Just found your blog at Serenity Now Party and now I'm your newest follower, I'll need lots of your tips :)

Cheryl said...

Great, thanks for stopping by and I hope you can learn lots. I'll keep sharing what I know and then share as I continue to learn.

Amanda @ Serenity Now said...

Great tip!! I always wondered how people got that widget on their sidebar. :)

Cheryl said...

Thanks, Amanda, I'm crazy about googling to find instructions for something I see on a blog. I love to know!! :-)

Renee Ann said...

Love this post! I'm going to try it this weekend. I'm visiting from Weekend Bloggy Reading.

Cheryl said...

Great, Renee Ann, if I can do it you can :-). Thanks for visiting.

Katrina @ They All Call Me Mom said...

Oh my gosh -- I love your blog and could really use tips because I'm totally clueless about computers/blogs/html stuff. How I've managed my blog thus far is a miracle, actually. So I am so happy to have found your blog! Can't wait to learn more tips!

I did the blog roll box -- so excited about that! Check it out! Of course your blog is in it :) I'm looking forward to getting more of my favorite blogs added to it.

One thing I need to fix...some of the blogs buttons are getting cut off, while others fit perfectly. I guess I need to play with the sizing, per your instruction.

Thank you so much, and have a great weekend!

Cheryl said...

Great, Katrina, so glad you found things helpful here. I knew absolutely nothing about blogs and very little about computers (grew up before the computer age) when I started blogging.

Yes, if the buttons are different sizes it makes the roll harder. Especially because it has to fit your sidebar. I'm off to see it!

Thanks for including my button!

Katrina @ They All Call Me Mom said...

Okay, I fixed it! Now all the blog button fit perfectly! Thank you!!

Wendy @ Ramblings from the Sunshine State said...

Cool! Great tip!

Visiting from Serenity Now!

Niki said...

What a cool feature!! Thanks so much for sharing!!!

Vicky@Oil In My Lamp said...

Just found your blog!! I used the Scrolling Blog Roll thingy...check it out on my blog! I am so excited!!! Thank you so much for sharing your knowledge!


Anonymous said...

I've been searching for how to do this forever! Thank you so much!!

Cheryl said...

Great, Amanda, Glad to help out!!

Cheryl said...

Vicky, I am excited with you!!! Off to see it.

wise_cookie said...

I have learned so much by following your blog. I really appreciate all the effort you have put into this in order to teach us. I can only hope that my blog will one day look half as awesome as yours, lol. I'm one of your newest followers but check out both your sites every day.

Cheryl said...

Wise Cookie, so glad you are finding all of this helpful. And I am sure your blog will be fantastic! Be sure and add it to the Alumni tab--a little "free" advertising.

izz said...

Thanks so much for the tip, I have been looking this for a while ^^. It's very helpful! I'm definitely following your blog :D