Blog Tutorial: How to resize buttons

 One of the blogs I follow did a post on what she should do to de-clutter her page. You know how it goes, you do some crafty things and you submit them to parties and FINALLY one gets featured (heck yeah!! Makes you feel good huh?). So you proudly add their button to YOUR page so everyone else knows that someone out there thinks your project(s) rock!

The problem comes in when you (are blessed to) get a few more... and they are different sizes, and they are big, and truth be told, it tends to clutter up your page. Instead of removing them and essentially throwing the "award" or "feature" back in said awarder or featurer... why not make them a little smaller and more uniform.
That's what I did; look at the right-hand column of my blog under "Friends".

So I'm going to explain this as best as I know how... but if it doesn't work... go ahead and drop me and email with the code you are struggling with and I'll see what I can do. The following buttons are the same exact size originally, I just used HTML code to resize them to 90 pixels (left), 100 pixels (middle), and the original size 150 pixles (right).

We will be working in the "Edit HTML" tab at the top of your new blog post.

Go get the code for the button you want to add to your page. I'll use my button as an example:








<center><a href="http://themoorebabies.blogspot.com"><img border="0" src="http://i1137.photobucket.com/albums/n514/StevieAlaine/blog-solidorange.gif" border="0"/></a></center>


Here is the code for the link - go ahead and paste in the button code where ever you want it on your blog; remember this goes in the HTML code, not the rich-text editor: (don't get scared... I'm about to try to explain what this all means)

There is also USUALLY code to center the button... lets just get rid of that now. If we are trying to align all of our buttons we do not need to worry about centering individual buttons.

These links have 2 parts to them:
1. The part of the code which links the button back to their blog. Look at the picture below. We do NOT want to change anything in here. HTML is very finicky, even one quote or slash or tag out of order will mess it up.

Click to enlarge

2. The part of the code that displays the image of the button. This code is between "&lt;img ... " and "/>". THIS is where we do our magic.

Click to enlarge

The image code has a few attributes:
src - the location where the image resides; photobucket, webshots, etc; the web location is surrounded by double quotes.

Click to enlarge

border - I prefer my buttons to not show a border so I set them to 0.
If a button does not have code for a border, you can add the following code in AFTER your src open and close quotes: * it doesn't HAVE to go after the src, anywhere between "&lt;img ... " and " />" is fine, I just find it is easier to always add to the end. *
border="0"

Click to enlarge

size - THIS is what we are going to change to make our buttons look uniform. Buttons are typically made 150 pixels by 150 pixels, but this is not always the case which is why out buttons sometimes don't "fit". So to add in the size attribute type in the following AFTER your src open and close quotes (and after border if you added that in there).
width="150" height="150".


Click to enlarge



For my blog, my column of buttons are actually 90, by 90, so I typed in:

width="90" height="90"

If a button is not a perfect square, this code WILL force it to be a perfect square and therefore will distort it.

Now I tried to make it easy to follow for non-computer minds... but no matter how long I have been a stay at home mom, I still have a technical mind. So if you would like me to clarify anything, or just help you out... feel free to drop me an email!

themoorebabies(at)gmail(dot)com

Good luck!!

Linking up: Creating my way to Success, The Girl Creative, CRAFT, Sarahndipities