Blogging Tips - How to Resize and Align Buttons

I've gotten a lot of blogging and HTML questions lately. While I am not an HTML or design expert by any means, there are a few things that I have figured out! Instead of individually answering your questions I thought it might be more beneficial to post the answers here.

Question: How do you get the buttons on your blog roll page to line up so nicely?

I am anal a bit of a perfectionist and seeing buttons in different sizes and/or not lined up correctly makes me cringe {I know, pretty stupid, right?} I'm going to use the first line of my blog roll page as an example. I'm sure these bloggy friends of mine won't mind ;)

If I just copied and pasted all of their button codes without making any changes, here's what it would look like:


Eeek! This would drive me crazy. And it just doesn't look very nice and polished, does it? There really doesn't seem to be a standard blog button size on the interwebz, so you might see some buttons that are 125x125 (like mine), 150x150, 200x200, or other random dimensions. Also, some people include alignment or line breaks in their code which can throw things off.


So I tweaked the code just a little bit and here's how it looks now:


Much better! Here's how I did it:

1. I removed any line breaks "<br>" and alignment code "<center></center>"

2. I added one tap of the space bar in between each button

3. I came across a number of different ways to resize the buttons, but found this to be the easiest:
Before: <img src="http://i53.tinypic.com/2i9gq6f.jpg" />
After:    <img height="125" src="http://i53.tinypic.com/2i9gq6f.jpg" width="125" />

Just add height="size you want" after "img" and then width="size you want" after the URL of the button.

If you'd like to line them up vertically in your sidebar, resize the buttons as you see fit but don't remove the line breaks. If they aren't included in the button code, you might want to insert them after each button.

Please let me know if you have trouble with any of this, or if I left something out!