Skip to main content

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

Comments

Ohhh very helpful thank you!! I am working on my button now and have no idea what I am doing.
Blogs 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 :)
Anonymous 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 Sharp said…
Thanks for that tutorial!! What a big help.
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!
Blogs 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!
Unknown 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....
I love love love the tutorials!! Keep them coming! :)
Unknown said…
THANK YOU! Worked perfectly.

Popular posts from this blog

New Website : come say Hi!

I think the last time we posted we said we were working on some things and left y'all hanging.....sorry! I bet you are all doing well, still blogging and I'm definitely interested in hearing from you. With so many working mama's, from home to side hustles, I decided that I would make coffee addict mama somewhat similar to FTLOB! If you're free to come check it out, comment and say HI! I'd love to pick up from where we left off. XOXO

Hello! I'm still alive. How's everyone?!

hi my lovely bloggers! how are you!? I hope you're following on twitter , so that I can re-tweet your blog posts! in the meantime, i'm working on something new......stay tuned and get ready for a nice new blog community site here! xoxo

Voting Poll is Up!

These are our nominees for March Blog of the Month! Be sure to check them all out and Vote for Your Fave! Bread and Butter Be One of a Kind Chrissy in America Positively Positive Eisy Morgan Colie Chronicles Preserving the Past A Candid Life Dirt and Lace You can nominate April's Blog starting now! Have Fun!