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!

36 comments:

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

Unknown said...

Thanks for sharing this.

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

Unknown 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's Wanderings said...

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

Heidi’s Wanderings

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

Unknown 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

~Anchored In Christ~ 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 "Disney Girl" 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!

Cassandra said...

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

Unknown 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

Unknown 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

Unknown said...

tiffany jewelry
polo ralph lauren
coach handbags
lebron james shoes
longchamp handbags
timberland boots
the north face clearance
kobe bryant shoes
moncler outlet
iphone cases
longchamp handbags
michael kors wholesale
canada goose outlet
ghd hair straighteners
cheap snapbacks
michael kors bags
ugg sale
michael kors outlet store
prada handbags
jordan shoes
football shirts
cheap jordans
basketball shoes
soccer jerseys
black friday 2015
polo ralph lauren
karen millen dresses
ralph lauren shirts
coach outlet online
swarovski jewelry
cyber monday 2015
coach outlet
cheap nhl jerseys
ralph lauren polo
ralph lauren polo
ugg boots
michael kors factory outlet
20151205caihuali

Unknown said...

20160326libinprada outlet
fitflop sale
jordan shoes 2015
discount michael kors handbags
hermes birkin bag
lacoste polo shirts
adidas outlet store
cheap jordans
jordan shoes
mcm backpack
nba jerseys
asics
michael kors outlet
herve leger dresses
michael kors outlet
true religion outlet
basketball shoes,basketball sneakers,lebron james shoes,sports shoes,kobe bryant shoes,kobe sneakers,nike basketball shoes,running shoes,mens sport shoes,nike shoes
nike tn pas cher
prada outlet
cheap nhl jerseys
kobe shoes
louis vuitton outlet online
longchamp outlet
louis vuitton outlet
beats headphones
true religion jeans
hermes bags
michael kors handbags outlet
michael kors outlet online
pandora jewelry
true religion jeans
coach outlet online
michael kors factory outlet
true religion jeans
michael kors handbags

chenzhen said...

coach purses on sale
michael kors outlet online
longchamp outlet
michael kors outlet clearance
coach factory outlet
ray ban outlet store online
ray bans
kate spade bags
cheap jordans
louis vuitton pas cher
fitflops
lacoste polo shirts
omega speedmaster
oakley sunglasses cheap
polo ralph lauren outlet
polo ralph lauren
michael kors outlet clearance
black timberland boots
prada handbags
michael kors canada
louboutin shoes
nike air max 90
stan smith adidas
nike air max 95
ecco outlet
adidas nmd runner
burberry outlet
rolex replica watches
yeezy boost 350
valentino bags
versace sunglasses wholesale
nike free run flyknit
fitflops sale clearance
ralph lauren uk
gucci handbags outlet
fitflops shoes
babyliss hair dryer
nike air force
polo ralph lauren
pandora jewelry
chenzhen20160601

Unknown said...

tiffany and co
babyliss flat iron
true religion canada
hermes outlet
ferragamo outlet
tory burch outlet
louboutin pas cher
rolex watches
burberry outlet
louis vuitton neverfull
air max 90
true religion outlet uk
coach outlet
cazal outlet
polo ralph lauren
michael kors outlet online
ferragamo outlet
cartier sunglasses for men
michael kors handbags clearance
louis vuitton handbags outlet
oakley sunglasses wholesale
air max 2015
mulberry handbags sale
michael kors outlet
lululemon uk
ray ban sunglasses
true religion uk
adidas outlet
lululemon pants
beats by dr dre
ferragamo outlet
louis vuitton neverfull sale
hermes birkin
mulberry sale
mulberry outlet
20160604caihuali

Unknown said...

ed hardy
michael kors handbags cheap
denver broncos jerseys
falcons jersey
michael kors handbags outlet
cowboys jerseys
versace
nike blazer pas cher
michael kors handbags
steelers jerseys

raybanoutlet001 said...

vera bradley outlet
cheap air jordans
nike air huarache
Cheap Jordans For Sale
michael kors outlet store
michael kors outlet
adidas nmd
ultra boost
nike roshe run one
tiffany and co uk

chenmeinv0 said...

salvatore ferragamo belt
nike cortez classic
adidas nmd r1
pandora jewelry
pandora bracelet
clarks outlet
discount ray ban sunglasses
paul pogba jersey
christian louboutin shoes
vans store
hzx20170425

Unknown said...

ugg boots
nike outlet online
adidas nmd
kate spade outlet store
canada goose jackets
jordan shoes
ugg boots canada
ugg outlet
uggs on sale
coach factory outlet
mt1010

Unknown said...

zzzzz2018.7.16
ugg boots clearance
fitflops
ralph lauren outlet
hermes belts
superdry clothing
uggs outlet
prada outlet
ugg boots
canada goose uk
ugg boots clearance

5689 said...

zzzzz2018.8.24
jimmy choo outlet
uggs outlet
ray ban eyeglasses
oakley sunglasses wholesale
ray ban sunglasses
nike shoes for men
yeezy
jordan shoes
ralph lauren uk
christian louboutin shoes

Related Posts with Thumbnails