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="" target="_blank"><img src="" /></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="" target="_blank"><img src="" /></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 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!


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!!!


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.


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.


M Renaaye said...

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

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!

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!

The Hartungs Blog

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

Related Posts with Thumbnails