Sunday, March 3, 2013

How to Resize and Align Blog Buttons.

how to resize and align blog button, blog design help

It's easy and fun to show support for your fave bloggers and linky//hop parties by grabbing their buttons and placing them on your blog. But what happens when those buttons don't fit inside your sidebar widths? Or they line up differently some to the left, others to the right, and some running straight down the center? It's obnoxious and frustrating and if you aren't sure of how to read or add HTML within the button codes you might be feeling helpless. Here are two quick tips to get your buttons, buttoned up!


Aligning Blog Buttons

Some button codes are created to center the button or position it left or right. You can either match all of your button codes to the same direction or just remove this section of the code all together. Let's look at the HTML for my blog button.....

<a border="0" href="http://www.heartshapedsweat.com/" target="_blank"><img src="http://i96.photobucket.com/albums/l194/krferrall/blogbuttonwpic200px.png" /></a>

This is the beef of a button's code. they all start with <a  and end with  /a>. not all buttons will have specifics for its border at the beginning of the code. Alot of times a buttons code will start with <a href=
My blog button is set to have no borders (no additional width or height other than the 200x200). My button code was also created without any alignment of left, right, or center. If I wanted it centered here's how it would look. 

<center><a border="0" href="http://www.heartshapedsweat.com/" target="_blank"><img src="http://i96.photobucket.com/albums/l194/krferrall/blogbuttonwpic200px.png" /></a></center>

Everything in red is new to the button code. The parts in red position the button in the center. If I wanted it aligned to the left or right then you would see the word left or right in place of the word center.
Get it ??? 
When you read the HTML of your buttons decide if you want to add this alignment or not. It is your choice as to how you want buttons aligned on your blog. Also, if you grab a button that is set to align in the center (etc.) and don't like that....simply delete everything in red. Do not delete anything else in the buttons code. *this is the basic, sometimes the code is a bit more complex but this will get you started and familiarized!


Resizing Blog Buttons

Blog buttons are created in all shapes and sizes. Some use 150x150 others 200x200, etc. If you understand the HTML of the button you can change its dimensions within the code by adjusting the numbers to your liking or by adding the height and width specifications yourself.

If you are weary of doing that this is the perfect solution, it does not involve any HTML work!!
*If your web browser is Chrome, exit out and use Mozilla or Internet Explorer. Chrome does not allow this option :(


Start from blogger dashboard. Click view blog. Now you're looking at your blog, scroll to the area of buttons you want to fix. At the bottom of that area should be a screwdriver/wrench icon. Click on that.
It will open your HTML in a pop up window. Now, click on Rich Text.

resize and align blog button tutorial, blog design help

Once you click "Rich Text" angels sing, heaven opens. You hear the man of Staples saying, That was easy!
Your HTML switches to images. It's feels like hitting the jackpot. Now, click on each button that you want to resize. This will give you the drag effect. As you drag each corner larger or smaller you should see the height and width sizes, remember these numbers....so you can match your other buttons. If you already know the width of your sidebars then size your buttons accordingly. If you do not know the width of your sidebars you will need to play with this until you find which size fits best.

resize and align blog button tutorial, blog design help

Once you have sized all your buttons remember to click SAVE!!! You may not have all your buttons loaded into one widget and that's fine. There is absolutely no problem with loading them separately. Be sure to open each one and repeat these steps, matching all button sizes and alignments. Save, refresh page and enjoy!


resize and align blog button tutorial, blog design help


I've used blog hop buttons for this tutorial. It's the same idea for any button.
But, if you're using Passion Fruit to display your buttons... do not mess with that!


Blog design is tricky to learn, it's an endless process. I have total admiration for blog designers. Not only are they creative in their work but they are brilliant in their presentations. Majority of their work is done in the background, behind the blog's aesthetics.  I am NO blog designer but as much as I learn, I will share with you. Ultimately, I feel, where there's a will...there is a way. If you truly want to learn this stuff then go for it! But if it steals from your joy of blogging then please get//pay for a blog design. There are thousands of options available to you! Little tricks like this one are easy enough to figure out as you go along but the overall look may not be. Whatever you choose template, paid for design, or DIY....just get your buttons, buttoned up! It drives me nuts to see them overlapping and zig-zagging! And, I always frown... wondering if you feel like I did before figuring out this trick?!

I really, really hope this helps some of you :) 
I'm all ears for any comments or questions!!!
*check out my no-reply blogger post if you think you might be one!
*check out this easy way to make a grab button, if you're in need of one!



post signature
Pin It!

26 comments:

Rekita Nicole said...

didnt know you can do this, i am going to add this link to my tutorial post that i am supposed to post today!!!

-Rekita

Sarah {Limited Space Organizing} said...

Thanks so much for posting this! It's drives me nuts too! You did a great job of explaining how to do it.

Sarah

limitedspaceorganizing.Blogspot.com

Julie-Becoming A Navy Wife said...

It's like you read my mind! I have been trying to figure this out for a while now! Thanks so much! I can't wait to get my computer back so I can try it!

Mags Pomichowski said...

Thanks for sharing this.

xoxo
Mags
http://magsmind22.blogspot.com/

M Renaaye said...

Hi Dear! Thank you for sharing this great code. Lovely blog I love it! xoxo

http://missrenaaye.blogspot.com

Krystle Wuethrich said...

Thanks for sharing this! I always wondered how bloggers got there buttons so neat! ;)

heidi said...

Thanks for the tip! I'm sure it's going to be so helpful.

Heidi’s Wanderings

Laura @ Chaotic Domestic said...

Thanks for the tip! It's so detailed and helpful! I am definitely saving this for future reference!

Jessica said...

This is SUPER helpful! Thank you for posting!!!

Katie said...

i knew about added center to the code but not about seeing it as images not code in blogger. thanks for sharing!

Sarah Schultz said...

This is great. Thank you so much for sharing.

jackie jade said...

great post! i'm slowly learning html and posts like these are so helpful!
-- jackiejade.blogspot.com

Laney said...

great post. I'll have to come back to this later when I'm fixing my button page b/c it needs fixing like a few other things

SH said...

This is a great tutorial! Bookmarking this.

Happy Monday!

Sheree
The Hartungs Blog
thehartungs.blogspot.ca

Janna Renee said...

Wow! Good to know! I usually go through the hassle of resizing them through an image editor. This is way easier!

Caravan Sonnet said...

This was such a wonderful help. YOU ARE THE BEST. SERIOUSLY! THANK YOU soo much for this information!!!
Rebecca :)

Janna Renee said...

Have you come across any blogs that this doesn't work on? I just tried to size the buttons, and the little drag feature never popped up. I tried clicking, and followed all the directions...Scouts honor!

Brenda said...

Cannot wait to try this. I have been searching for months to find a tutorial that makes sense to me and yours does!! New follower thru GFC. Thanks so much!

C Hath said...

Thank you so much for putting up this tutorial! It really helped me out!! :)

Cathy McInnes said...

This was so helpful-thank you so much! Pinned and plan to use a lot :-)
Cathy @ three kids and a fish

Karen Del Tatto said...

I am SOOO GLAD I found your blog post! It took me a few tries to find the answer I needed and you most definitely provided it!!

It worked! It could not have been easier!

Thanks so much for sharing this amazing tip! And yes, Angels did sing!! :-D

dong dong said...

2015622dongdong
www.louisvuitton.com
ray ban sungalss
copy watches
hollister
true religion outlet
marc jacobs handbags
jordan concords
louis vuitton outlet
black timberland boots
toms shoes
mulberry handbags
gucci shoes
burberry outlet
michael kors outlet
michael kors
kobe shoes
chanel handbags
christian louboutin
christian louboutin outlet
ray ban glasses
oakley sunglasses cheap
nike air max
ray ban sunglasses
michael kors outlet
christian louboutin outlet
polo ralph lauren home
michael kors outlet online
nfl jerseys
gucci
hollister clothing
fitflops clearance
gucci outlet
michael kors outlet
lebron james shoes 2015
oakley vault
juicy couture

oakleyses said...

longchamp outlet, ray ban sunglasses, oakley sunglasses, oakley sunglasses, burberry outlet, michael kors outlet, coach purses, michael kors outlet store, nike air max, nike outlet, longchamp outlet, kate spade, tory burch outlet, oakley sunglasses wholesale, michael kors outlet online, coach outlet, true religion outlet, nike free, ray ban sunglasses, nike air max, prada handbags, christian louboutin outlet, christian louboutin, coach outlet store online, gucci handbags, michael kors outlet online, michael kors outlet online, burberry handbags, replica watches, christian louboutin uk, polo ralph lauren outlet online, michael kors outlet, tiffany jewelry, longchamp outlet, jordan shoes, prada outlet, tiffany and co, chanel handbags, polo outlet, christian louboutin shoes, kate spade outlet, coach outlet

oakleyses said...

hogan outlet, true religion outlet, nike roshe, north face, sac vanessa bruno, nike free run, true religion outlet, louboutin pas cher, michael kors, jordan pas cher, abercrombie and fitch uk, timberland pas cher, michael kors outlet, new balance, nike air max uk, ralph lauren uk, vans pas cher, nike air max, polo lacoste, nike free uk, guess pas cher, oakley pas cher, nike blazer pas cher, longchamp pas cher, sac longchamp pas cher, sac hermes, hollister uk, north face uk, mulberry uk, michael kors pas cher, converse pas cher, hollister pas cher, nike tn, air max, ray ban pas cher, nike air max uk, lululemon canada, true religion jeans, ray ban uk, nike air force, polo ralph lauren, burberry pas cher

oakleyses said...

bottega veneta, jimmy choo outlet, insanity workout, abercrombie and fitch, mcm handbags, oakley, soccer shoes, chi flat iron, p90x workout, wedding dresses, nike trainers uk, nike air max, soccer jerseys, vans outlet, mont blanc pens, nike roshe run, nike roshe run uk, hollister, north face outlet, longchamp uk, north face outlet, reebok outlet, hermes belt, valentino shoes, celine handbags, giuseppe zanotti outlet, mac cosmetics, new balance shoes, nfl jerseys, nike huaraches, iphone 6 cases, babyliss, instyler, baseball bats, beats by dre, hollister clothing, ferragamo shoes, ghd hair, herve leger, lululemon, timberland boots, asics running shoes

oakleyses said...

wedding dresses, montre pas cher, ugg,ugg australia,ugg italia, ugg boots, swarovski crystal, ugg boots, converse outlet, thomas sabo, links of london, replica watches, ralph lauren, ugg, toms shoes, hollister, ugg pas cher, uggs outlet, pandora charms, marc jacobs, louboutin, ugg,uggs,uggs canada, lancel, supra shoes, pandora jewelry, gucci, swarovski, vans, juicy couture outlet, uggs on sale, ugg uk, uggs outlet, hollister, converse, pandora uk, ray ban, nike air max, juicy couture outlet, coach outlet, karen millen uk

Related Posts with Thumbnails