24 February 2011

How to Tidy Up Your Linky Party Buttons!

You know when you're working on something and it's difficult/ complicated/ confusing/ generally not working, but you keep at it until you figure it out--that feeling you get?  I feel like a mad scientist--It worked!  IT WORKED!  BWA-HA-HA-HA-HA!  (Ahem!  Sorry about that.)  I call it the "evil laugh of success."

There was definite evil laughing when I finally figured this out.  Here's what happened.

It all started on a dark and stormy night...or an unseasonably pleasant February evening, anyway.  I was exploring one of the blogs I follow, when I came upon a tutorial on how to resize your blog's buttons with html.  Personally, I'd just use my good ol' Photoshop and change the actual size of the button, but what about OTHER blog's buttons you have on your page?  That would be worthwhile.

Most (all?) linky party hosts ask you to put their party button somewhere on your blog.  (I totally would if I hosted a linky party--advertising!)  So I have the buttons for the parties I join down at the bottom of my homepage, but they were such a mess!  The buttons were all different sizes, and some of them didn't play nice with the other buttons (insisting on being on their own lines), and they just generally made my page cluttered.

But with this tutorial, I could make them all the same size!  (The anti-social tendencies of the buttons would be dealt with later.)  It was great, and so simple!  Well, I was excited and tried it immediately...and nothing happened.  Re-read the instructions.  They weren't very clear.  It was only one step--insert width:##; height:## somewhere after the "img" in the html code.  Problem is, it says "img" several times in the button code.  ???  So I tried a couple of different things, with no luck.  I checked the comments; maybe others were having the same problem, and the blogger clarified.  Well, other's had the same question, but no answer yet.

Okay, next step--try Google.  I found this article, How To Resize an Image With HTML,  and I thought, A button is just an image, when you think about it.  Maybe this will work.

It said to put the new height and width after the img src html tag, so:
<img src="the url where the image is hosted" width={new number} height={new number}

So for a real-life example, here's how you would re-size my button.

The Original Button  and Resized  (Aww, isn't it cute?)

Here's the code:
By the way, sometimes the "img" and "src" bits aren't right next to each other, so look for the "src" specifically.

Now a quick note about the anti-social buttons:
If you see a code like this  <center>  then it is (you guessed it) centering itself.  Just take that out.

Let me know if you have questions!

Update:  I thought you might want a point of reference so you can choose how many pixels tall/wide to make the buttons.  The linky party buttons at the bottom of my page are 75 x 75 pixels, and the Resized Button in my example is 35 x 35 pixels.
Oh, yeah--remember to keep the dimensions proportional.  Rectangle buttons will look weird if you resize them to be squares.


  1. Hi Jill:

    I found you while blog hopping! Your blog looks very cute and helpful! Lord knows I need help!!

    Looking forward to reading your blog!


  2. Cute Blog! I’m a new follower Happy Friday!! I would love for you to stop and take a look at my blog as well! Thanks!

  3. Thank you!! I have been trying to do this for weeks! I'm not exactly tech savvy, and you have positively made my day. I'm your newest follower. Have a great day!

  4. This is awesome! My buttons definitely don't play nice with one another!!! :)


Thank you for your comment! I love to hear from you--your comments make my day!

I've been getting a lot of spam comments lately, so I'll not be allowing anonymous comments for the time being. Sorry to any legitimate anonymous commenters!