Saturday, June 25, 2011

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:

Moore Babies

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 "<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 "<img ... " and " />" is fine, I just find it is easier to always add to the end. *
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!

Good luck!!

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


  1. As someone who has NO html experience I found this really easy to understand. Now I don't know if I could execute it, but reading this made me think that I could =)

  2. Great tutorial! I agree - nice and easy to understand for those of us not up on our html!

    Thanks for linking to a Round Tuit!
    Hope you have a great week!
    Jill @ Creating my way to Success

  3. Hey! Stopping over from the Military monday hop! I WAS going to follow, then I saw ya'll are Tennessee just kidding. We're big Auburn fans! WAR EAGLE! =P

    I'm a new follower--would love a follow back...even if we're Auburn fans!

  4. I just found your blog and am your newest follower. Thanks for the great tutorial!

  5. Very cool info to have.... wanted to give you a heads up.... I had to close down Madras 'n Pearls. You might want to take off the link for now.

  6. :-)Hi, friend! Happy 4th of July! I'm admiring all your creative posts here. Can you please share them at the Creative Bloggers' Party & Hop? Hope to see you there at the party :-)

  7. Hi Stevie, I am a brand new blogger and stumbled upon this post via a google search on the topic. Thanks so much for the info, worked like a charm and very useful :) I am a new follower!

  8. Stevie~
    Thank you so much for having this tutorial. It is simple & I just redid all my sidebar blog buttons! Now can you tell me how to get them in a double row?? I'm also trying to add things to my top row of buttons that I made, but can't seem to figure it out!! I may have a template that doesn't support some things I want to do. It can be so complicated! Thank you for making my blog look a little more uniform!

  9. Thank you for this post. Exactly what I needed help with and it worked perfectly!

  10. Thank you for this post! It was SUPER helpful and work wonderfully :)

  11. Thank you! I had no idea how to do that. I tried a couple of other tutorials but this is the one that worked for me!

  12. just found this super helpful thankyou x


Link within

Related Posts Plugin for WordPress, Blogger...