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

15 comments:

Lindsay @ Delighted Momma said...

Ohhh very helpful thank you!! I am working on my button now and have no idea what I am doing.

Vic said...

@Lindsay (your blog is def delightful); let me know if you need any help making one:)

Michelle Porth said...

Thanks for the tutorial! It's great to find out little tricks like this, especially when you're new to the bloggy world like myself :)

thesecretlifeofjen said...

Just made mine all matchy matchy :) ;) Thanks, great post.

Claire M. said...

Very interesting post!

Ashley said...

Great tutorial and love A Sorta Fairytale so that was a good buttons to steal. :)

Alida said...

Thanks for that tutorial!! What a big help.

Candice @ Made With Love said...

Thank you so much for this tutorial!!!

laura said...

I don't want to seem hyper critical, but they way you are resizing your buttons is really complicated as well as bad practice! Style belongs in a style sheet.

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!

Vic said...

@Laura, thanks for the input--seems a little complicated to me so I'll stick with the way I do things...I like simple and easy! Thanks Though, feel free to do however you like!

Bibi - Simple Summit said...

thank you so much. as soon as we get internet back I will work some more on mine. Thank you!!!

Misty said...

Oooh! Thanks for this. So helpful!

Gillian said...

This is awesome! Thanks so much....

Kimberly said...

I love love love the tutorials!! Keep them coming! :)

Chrissee said...

THANK YOU! Worked perfectly.

Members: Join Us

Follow by Email

Search This Blog

Google+ Followers