How To Tidy Up Your Buttons!

I'm sure you have all seen the blogs with the sweet, tidy buttons at the bottom of each post! The OCD side of me was DYING to know how to do this.  It just looks nice, and it allows you room to post EVERY button for the parties you link up to! Win-Win!

So I turned to SJ over at Homemake On A Dime to help me out. Thanks SJ! I've had quite a few people ask me how I did mine, so I thought I'd share the information with you.  Beware, I am NOT tech savvy! So I'll explain this the best I can!

Let me forewarn you, this will take some time to do.  But once you're done, you'll never have to do it again!

Here we go!

You have to have the actual HTML of the button you want to work with.  Simply copying the image will not work.  We'll use mine for reference.

<center><a href="http://craptastickatie.blogspot.com/" target="_blank"><img alt="CRAPTASTIC" src=" http://i1096.photobucket.com/albums/g330/kro2d/CraptasticButton-1.jpg"/></a></center>

One thing to note is that sometimes when you paste the HTML code onto your post, the link for the blog or picture may appear as an actual link.  You can see what I'm taking about in the above HTML - see how the link to my blog and my photosource are clickable? They shouldn't be! Make sure you click on the link and "remove" the hyperlink.  Otherwise your button will not show up correctly.  You want the entire HTML code to appear as text, no hyperlinks.

Notice how it has "<center>" at the beginning and end of the HTML? You wanna delete that so the button won't automatically center itself.  Not all HTML codes have this.  Some may have something similar to <br> (or something like that).  Delete that too.

So now we have this:

<a href="http://craptastickatie.blogspot.com/" target="_blank"><img alt="CRAPTASTIC" src=" http://i1096.photobucket.com/albums/g330/kro2d/CraptasticButton-1.jpg"/></a>

It's time to resize your button.  SJ recommended using 75x75.  I have seen some people use 50x50, but to me it's just too small to read and doesn't really give credit back to the person's blog.

In order to resize you want to enter this text into the HTML code:

border="0" height="75" width="75"

You'll find that some HTML codes already have a border/height/width in it.  All you need to do is type in your new numbers.  However, some codes, like mine, do not.  Where you enter this text to resize will vary for each HTML code.  You just have to play with it.

For my particular code you enter the text after the .jpg"

Like this:

<a href="http://craptastickatie.blogspot.com/" target="_blank"><img alt="CRAPTASTIC" src=" http://i1096.photobucket.com/albums/g330/kro2d/CraptasticButton-1.jpg" border="0" height="75" width="75"/></a>

Once you've typed in your text, preview your post.  That way you can see if it worked.  If the button doesn't show up, delete the text you entered and try it somewhere else in the HTML.  You'll have to play around with some of the HTML codes until it works for you.

When you are finished editing all the HTML codes, make sure there are no spaces in between each HTML code so all the buttons will appear right next to each other.

I added all of the codes to my "Parties I Link To" page.  Now, whenever I am finished writing a post I can just view my "Party" tab, copy all of the buttons, and past them at the bottom of my post.  It transfers the website link and photo all in one! Easy Peasy!

A few tips:

1.  If you are having problems with your buttons working, try pasting the text into wordpad, copy it, then repaste it into your post.  Sometimes the font format can cause the code not to work.

2.  If it still only shows up as an HTML code, make sure under "Post Options" (at the end of your post) you have selected "Interpret typed HTML."  I didn't know you had to do that when I first started blogging and was so mad I couldn't use buttons.

3.  Make sure you have removed all the hyperlinks in the HTML code and only have text.

4.  If your buttons appear fine, but they are scattered all over your post, don't worry.  Just publish your page, then go back in to edit.  While you are in edit mode you can simply delete the space in between each button.

I hope this helps!  Once you do 3-4 (or 50) of these buttons it will become easier to figure out where to put you button sizing text.  Best of luck!

Cheers!