Tuesday, December 13, 2011

How to line up your sidebar buttons

Probably just a crazy pet peeve of mine, and I am sure it doesn't even matter in the long run, but I HATE it when sidebar buttons are sized incorrectly, or not lined up! I have spent likely hours trying to fix my own, and sometimes Blogger doesn't make it easy!

Here are a few quick shortcuts to avoid situations like this:



1. Put your buttons inside a table:
The code will look like this

<table border=0 cellpadding=10><tr><td>BUTTON CODE</td><td>BUTTON CODE</td></tr><tr><td>BUTTON CODE</td><td>BUTTON CODE</td></tr></table>

This will result in:
BUTTONBUTTON
BUTTON BUTTON
2. CHANGE the size of your images to fit their location!
To change the size of an image is simple! Within the button code, you will see <img src="http://blablabla"> right after the second quote, add width="###" Experiment to see what will fit within your borders, and then use that size! If the button is not perfectly square, add height="###"!


3 comments:

mglawler said...

Awesome information. Thank you!

Coupons In Motion said...

I really like the hints and info you have here. Just wish it was for self-hosted WordPress site. Oh well. Coupons In Motion hopiing over from the Alexa Hop.

Cindy said...

Coupons in Motion- Hi! Hey you can use this particular tip on self hosted wordpress too! Insert an html box in your sidebar, (gadget? widget? What do they call it on WP?) and the coding works the same!