Resizing Buttons Tutorial

Hello Friends. I've seen so many blogs with different sized buttons and some that cannot get their buttons to fit perfectly into their sidebars, so I'm going to show you how to re-size your buttons to make it neat and clean! Check out our Community-I've re-sized everyones button to 110X110. I also get so many emails and questions about this so I'll be sure to link everyone to this tutorial.

Say you grab a button that is 150X150 like this:



And It's a little too large or not big enough for my sidebar fitting. I may want it to be 115X115 or 200X200, so I'm going to go into the HTML and change the width and height to my liking:

Here is what the code looks like without me editing:

<a border="0" href="http://pandmchiappini.blogspot.com/" target="_blank"><img src="http://i56.tinypic.com/9hmhr6.jpg" /></a>

Here's How I like to edit my buttons; I like to get rid of the stuff that "DOESN'T NEED TO BE THERE" because I like it simple.

I'm going to remove unneccesary things that confuse me, so I'm going to remove the border="0" and make it look like this:

<a href=http://pandmchiappini.blogspot.com/ target="_blank"><img src="http://i56.tinypic.com/9hmhr6.jpg" /></a>

Now I'm going to re-size it to 120X120 and to do this, you will need this code:

                                               style="WIDTH: 280px; HEIGHT: 150px"

As You can see, the width and height are different from what i need, so I will change that when I get in there-but paste the entire red code into the button code after img:

Now it looks like this:

<a href=http://pandmchiappini.blogspot.com/ target="_blank"><img style="WIDTH: 280px; HEIGHT: 150px" src="http://i56.tinypic.com/9hmhr6.jpg" /></a>

Now I change the height and width and it looks like this:

<a href=http://pandmchiappini.blogspot.com/ target="_blank"><img style="WIDTH: 120px; HEIGHT: 120px" src="http://i56.tinypic.com/9hmhr6.jpg" /></a>

Now My Friends Button will Fit My Sidebar and I can edit all of my buttons so that they are the same size; looking neat and clean!




If you wanted to make it Centered, add <center> in the beginning of the code and </center> at the end of the code.





If you want a space between the buttons, put a space after each new </a> <a>  like this below:

I hope this helps and if you have any further questions or tutorials you need, please let our staff know! thanks guys!

Check out a sorta fairytale since I stole her button;D