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
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:
Check out a sorta fairytale since I stole her button;D
Comments
It is super easy to change your CSS.
To do that, just add a few lines to your style sheet.
If you don't know where your style sheet is, view they source of your web page, you will see something like link rel="stylesheet" type="text/css" href=" "
Edit that file and add in something like ~
.resize {
width: 150px;
height : auto;
border: 5px solid gray;
}
.resize {
width: auto;
height : 150px;
border: 5px solid gray;
}
having it twice preserves aspect ratio of the images, which isn't a problem with square buttons, but if it is a rectangle, it can be.
then, in your html, you just use "class=resize" which is much shorter.
img src="/interior-design-ideas-9.jpg" class="resize"
Hope that helps!
PS add in the greater than and less than tags <> where appropriate, i had to leave them out be able to post the comment!
♥