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.
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!