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?