Monday, February 21, 2011

Let's clean up those buttons, yo

So, I had a reader comment that she really liked how my buttons look when I link up to parties. I'm going to show you how to do that. No, I'm not a code genius. Most of this I know from hubsters who is a web designer.

This is what I'm talking about.



And it's gorgeous and awesome and you totally want it for your blog, right? Imma teach ya how to do it.

I'm going to be using my button, and the button of my blogging BFF, Lesley from Seconds From Crazy. And if you have more buttons to add, just rinse and repeat. I'm first going to break down our buttons.

My button code is

<center><a href="http://lifecraftsandwhatever.blogspot.com/"><img border="0" src="http://img.photobucket.com/albums/v298/Jenfur427/125x125.png" /></a></center>




And her code is

<center><a href="http://secondsfromcrazy.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPg4bUUOK_2TTDjrAeExFxSNOEUKG72KYB6SSBgCcJsA14SjoCybbR-kMIstiVEl2xk01p20t9doEpGG7aCBGT34YDDDyvPjq9OIKj02EEoK58Slau5Kv2PBvy_S3LLexP4qn3mh3rzwrL/s1600/button21.jpg"/></a></center>





So if I just copy and paste the codes in my post in the html tab, they show up like this.








They show up in the center of the page because of the opening and closing center tags. A lot of blogs (like both of ours) come with center tags as part of the code.


<center>blah blah blah</center>
 


And her button is larger than mine. Show off. :)

If you've link to a BUNCH of parties, can you imagine how long and cluttered your post is going to be? And not all buttons have the center tag, which means some buttons are centered, some are on the left, some big, some small.

Button vomit, EVERYWHERE.

The first thing I do is take out the opening and closing center tags on both.  


Which will leave us with this. 

<a href="http://lifecraftsandwhatever.blogspot.com/"><img border="0" src="http://img.photobucket.com/albums/v298/Jenfur427/125x125.png" /></a>

<a href="http://secondsfromcrazy.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPg4bUUOK_2TTDjrAeExFxSNOEUKG72KYB6SSBgCcJsA14SjoCybbR-kMIstiVEl2xk01p20t9doEpGG7aCBGT34YDDDyvPjq9OIKj02EEoK58Slau5Kv2PBvy_S3LLexP4qn3mh3rzwrL/s1600/button21.jpg" /></a>


And that makes our buttons look like this.






A bit better, but not quite right, right? You'll notice that her button is still bigger than mine, right? I'm all about things being the same size. Makes it all pretty and stuff.


So I'm going to tell her button what to do. Cause it's my blog and I'm the boss. I want her height and width to be the same as mine, which is 125x125.


Now you might do it a different way (if you're a code changer like me) but this is how I do it. I put in

height="125" width="125"

(Instead of 125, you'll put in the pixel size you want. I use 90 pixels for my blog link party buttons, which is height="90" width="90" . You'll notice that there is a space behind each command. So height="125"SPACEwidth="125"SPACE


That command will tell her button what size to be. Without the height and width info, her button just comes as it comes. And some bloggers have HUGE buttons, and I don't want that.

I put it here, right before src




So now her button now says 

<a href="http://secondsfromcrazy.blogspot.com/"><img border="0" height="125" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPg4bUUOK_2TTDjrAeExFxSNOEUKG72KYB6SSBgCcJsA14SjoCybbR-kMIstiVEl2xk01p20t9doEpGG7aCBGT34YDDDyvPjq9OIKj02EEoK58Slau5Kv2PBvy_S3LLexP4qn3mh3rzwrL/s1600/button21.jpg" /></a>

I didn't have to do anything to my button, since it's already sized at 125x125.   


So now our code says

<a href="http://lifecraftsandwhatever.blogspot.com/"><img border="0" src="http://img.photobucket.com/albums/v298/Jenfur427/125x125.png" /></a>

<a href="http://secondsfromcrazy.blogspot.com/"><img border="0" height="125" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPg4bUUOK_2TTDjrAeExFxSNOEUKG72KYB6SSBgCcJsA14SjoCybbR-kMIstiVEl2xk01p20t9doEpGG7aCBGT34YDDDyvPjq9OIKj02EEoK58Slau5Kv2PBvy_S3LLexP4qn3mh3rzwrL/s1600/button21.jpg" /></a>


And our buttons are happy and equals and look like this.






So since I want to put them in the same line, I just delete the spacing in between the two codes. I save the "space deleting" for the end, in case I have a mistake, it's a lot easier to find it.

So after I delete my space, my code looks like

<a href="http://lifecraftsandwhatever.blogspot.com/"><img border="0" src="http://img.photobucket.com/albums/v298/Jenfur427/125x125.png" /></a><a href="http://secondsfromcrazy.blogspot.com/"><img border="0" height="125" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPg4bUUOK_2TTDjrAeExFxSNOEUKG72KYB6SSBgCcJsA14SjoCybbR-kMIstiVEl2xk01p20t9doEpGG7aCBGT34YDDDyvPjq9OIKj02EEoK58Slau5Kv2PBvy_S3LLexP4qn3mh3rzwrL/s1600/button21.jpg" /></a>

And that makes our buttons be besties and look like




If you have more buttons, just repeat. Over and over.

If you have more buttons and it's wider than your page, it will automatically go to the next line.

If there is a rectangular button, I put the height to be the same as everything else, and I just kind of guess on the width. If their button is 150 pixels tall by 200 wide, if I take the height down to 100, I'll subtract the same from the width, so 150.

It's worth it to hit preview frequently until you get the hang of it. 

If they already have height and width set on their button, just change the number inside the quotation marks. 

Easy peasy?

Photobucket

13 people love me:

Five Seconds From Crazy said... [Reply to comment]

Oh Emm Jee! I have wondered how to do this for centuries. Literally.
Thanks so much for reminding me of why I keep you around. Cuz ur smart and shit.

Marie C. said... [Reply to comment]

Thank you SO much! I've wanted to figure this out since I started blogging. You're a genius!

Five Seconds From Crazy said... [Reply to comment]

Ok..back to tell you that this all totally worked! It looks so much cleaner and better and more professional like. So professional that my blog is now going to buy a fancy dress suit and a briefcase. And it'll start eating cobb salad.

Unknown said... [Reply to comment]

Following you back from the blog hop
My-2-Cents

OurForeverHouse said... [Reply to comment]

OMG - thank you so much for this. I love this info. I hate how huge some peoples buttons are and now I too can be the boss of my blog!

Unknown said... [Reply to comment]

I am following you back from the bloghop. Thx for following My-2-Cents

Dorothy said... [Reply to comment]

I always wondered how to do it without Live Writer but if you want a none code way to clean up those buttons...try out Live Writer. You can reopen posts and you can also shrink buttons (and pictures) on there. If anyone wants to see what it looks like I have some posts in my blog where I have done that.

Carrie @ Dittle Dattle said... [Reply to comment]

Awesome! A huge thank you for taking the time to share with rest of us :D

Michelle said... [Reply to comment]

I shared the link to this post on my blog :)

Mimi said... [Reply to comment]

Thank you - truly thank you! I have been working on this and came close to getting what I want but never could totally make it happen.
Can't wait to try!
Bless you!
Mimi

Susan @ Second Chances by Susan said... [Reply to comment]

Thanks for the help! And, thanks for doing it in an entertaining way! My party page looks so much better now!

Anonymous said... [Reply to comment]

Thanks so much for sharing this tip. I've wanted to know how to do this for a long time, but did not know how. I'll have to give that a try!

Unknown said... [Reply to comment]

...very, very VERY much needed!
my linky parties page is so messy gives me hallucinations :)