How to Scale a Button

Yesterday I got my blog all set up to do button swaps (I am no longer swapping.)  I was emailing back and forth with one of my fellow blog designer friends, and it occurred to us that maybe most people don’t know how to scale images using HTML.  I certainly had no clue until a few weeks ago.  I thought I would do a little diagram for you to show you how it works.

Let’s back up a little bit.  A blog button is a little image that is designed to lead people to your blog.  It usually has your blog title, and the code links it to your blog, so that if someone clicks on the image they will be directed to your blog.  A lot of times bloggers will display their button and then use code to make a little text box underneath so that readers can copy the code into an HTML/JavaScript Gadget on Blogger or a Text widget on WordPress, and then have a link to your blog on their site.  Bottom line: blog buttons are little ads that help you get more readers.

The problem is that sometimes the sidebar width and the button size don’t always match up.  These days people are making their blogs really wide, which gives them wide sidebars.  Blog buttons used to pretty much always be 125 pixels by 125 pixels.  Now more and more people are making bigger buttons to accommodate bigger sidebars.  By learning just a little bit of HTML code you can format any button to fit in your sidebar.

The screen captures I chose were for code that makes a grab button and the text box below so that people can put the button on their blog.  If you are just editing the code for a button, just pay attention to the top part of the code, and feel free to ignore the text box part.

The process for Blogger and WordPress is the same, but I thought I would show both so that you could use the one that looks familiar.  All you need to do is make sure that the code for the button has the height and width listed somewhere after the “img src=”www.hlk.sdf/” but before the />.  Specifying height and width isn’t necessary for the button to function, so if the code doesn’t include that, go ahead and type it in just as you see it above.  Then all you have to do is make sure that the numbers are the correct size.  Make sure that if you are scaling a button that isn’t a square that you scale it to the nearest pixel (I usually use proportions and real math like I learned in middle school… who would have thought!)  Once you do that, you’ll be all set!

Here’s the catch: if you are scaling a button to be significantly larger than the original file size, it will become blurry.  But I think it’s usually worth a try!