Anatomy of a Button Code and How to Create Your Own!

Parts of the HTML Code for a Button and what they mean!

<center><a href=”http://fill in your own site url” mce_href=”http://fill in your own site url” target=”_blank”><img src=”http://farm5.static.flickr.com/4077/4894110612_d2d81f29b7_m.jpg” mce_src=”http://farm5.static.flickr.com/4077/4894110612_d2d81f29b7_m.jpg” border=”0″ alt=”Fall Follower Giveaway Tour” /></a></center>

Ah, the button-mystery!  Have you been confused by the html button code like I have?  Every time I have to do anything that involves a button, I take a deep breath, a sip of wine, and jump in.  A half hour later, I’m cross-eyed and confused.  This is what I have been able to glean from various “how-to’s” and a site called, HTML Code Tutorial.

Here’s the code for the Fall Follower Giveaway, to use as a sample.

<center><a href=”http://KellysLuckyYou.com” target=”_blank”><img src=”http://farm5.static.flickr.com/4077/4894110612_d2d81f29b7_m.jpg” border=”0″ alt=”Fall Follower Giveaway Tour” /></a></center>

1. <center> This determines the position of the button in the column.  The choices are left, right, center, justify.  The most common choice is <center>.  If you put nothing at all, the default is left.

2.  <a href=”http://KellysLuckyYou.com” The words a href= create a link.  This portion of the code determines where people will be taken, when they click on the button.

3.  target =” _blank”> When someone clicks on the button, it will open the link in a new page.

4.<img src=”http://farm5.static.flickr.com/4077/4894110612_d2d81f29b7_m.jpg” This phrase tells where to go to find the picture for the button image.  The words img src= gives the location of the picture.  In this case, my picture is on Flickr.  If you need help finding the location of your picture, I’ll write about that below.

5. border = “0” This means you do not want a border around your picture.  If you wanted a border, you can put a number there, for the thickness of the border, ie border-10.  You can also put a color, if you wish, for the color of the border, ie Bordercolor=red

6.  alt=”Fall Follower Giveaway Tour” If for any reason, your picture cannot be found (Flickr site is down, picture has been removed from Flickr, etc), these are the words that will be displayed.

7. </a></center> ends and closes this portion of the code.

This completes the button!

If you want to create a code box, under the button, so that other people can pick up your code, here is how you do that.  Here is the code for the Fall Follower Giveaway Button Code, that would just follow the button code above:

<br /><center><textarea rows=”4″ cols=”18″ name=”Fall Follower Giveaway Tour” readonly=”readonly”><center><a href=”http://kellysluckyyou.com” target=”_blank”><img src=”http://farm5.static.flickr.com/4077/4894110612_d2d81f29b7_m.jpg” border=”0″ alt=”Fall Follower Giveaway Tour” /></a></center></textarea><center>

1. <br/> is a line break.

2.  <center> is aligning the code box in the column

3.  <textarea rows=”4″ cols=”18″ The word “textarea” starts this part of the code which is going to be a form field.  This portion of the code determines the size of the box.

4.  name=”Fall Follower Giveaway Tour” This phrase is not necessary but it may come in handy, if at some point, your site needs to identify this box.

5.  readonly=”readonly” Meaning of this, is dear computer, please stop doing what this html code tells you to do and just put the letters up on the screen.  Hence READ, meaning don’t act, just print it on the screen, so the code can be copied.

6.  <center><a href=”http://kellysluckyyou.com” target=”_blank”><img src=”http://farm5.static.flickr.com/4077/4894110612_d2d81f29b7_m.jpg” border=”0″ alt=”Fall Follower Giveaway Tour” /></a></center> Code that will show up in the box, that people can copy to put your button on their site.

To create your own button and code box:

Step One: Design the button – choose a picture, drawing etc.  You can use a photograph and add text if you wish.  A site like picnik.com offers a ton of options, with special effects, stickers, touch-ups, and more.

Step Two: Once you have your design – save the picture to a photo site like Flikr.com or Photobucket.com.  On Flikr.com, to find out the url of your image to use in your code, do this.  After you sign in, you’ll see your photos on your home page.  Click on the image you wish to use.  Above the image you’ll see “Share This”  Click to open the options and you’ll see “Grab the HTML”.  Open that.  You only want the portion of it that says <img src= etc.

Step Three: Copy and paste this button code into a word/text document and change the things in bold (and any other variables you wish) to be specific to your button.

<center><a href=”http://KellysLuckyYou.com” target=”_blank”><img src=”http://farm5.static.flickr.com/4077/4894110612_d2d81f29b7_m.jpg” border=”0″ alt=”Fall Follower Giveaway Tour” /></a></center>

Step Four: Copy and paste this code box code into the word/text document and change the things in bold.  The underlined part is replaced by your button code.

<br /><center><textarea rows=”4″ cols=”13″ name=”Fall Follower Giveaway Tour” readonly=”readonly”><center><a href=”http://kellysluckyyou.com” target=”_blank”><img src=”http://farm5.static.flickr.com/4077/4894110612_d2d81f29b7_m.jpg” border=”0″ alt=”Fall Follower Giveaway Tour” /></a></center></textarea><center>

I hope this all makes sense!  Please ask questions, if you have any!

My next challenge is going to be trying to create my blogroll page, resizing all the buttons to be the same time, and maybe adding borders…..  I’ll let you know how it goes!