How To Create A Button Code

I explain to my design clients over and over how to create a button code, so I thought I would write a post about it.

So you just got a blog makeover and with it came this nifty little button.  (Or you got industrious and made your own using my tutorial.)  But you aren’t entirely sure what to do with it.

The Code

First, let me explain the basic button code.  Here is the code to my Musings of a Housewife button.

<a href=”http://www.musingsofahousewife.com”><img src=”http://i268.photobucket.com/albums/jj12/dcrdesign/SMB.gif”>

Now let’s break it down.  There are basically two parts:

Hyperlink Reference: <a href=”http://www.musingsofahousewife.com”>

The hyperlink reference is defined by href.  This determines the web page that the button will link to — in this case, Musings of a Housewife.

Image Source: <img src=”http://i268.photobucket.com/albums/jj12/dcrdesign/SMB.gif”>

The image source is defined by img src.  This calls up the image from where it is hosted online.

So, let’s use this generic example, and I’ll show you how to create your own working button code.  You will replace the parts in bold. Make sure you end the code with </a> because that is how you close the code so that nothing else picks up the hyperlink reference.

<a href=”Web Page URL”><img src=”Image URL”></a>

1) Create the Hyperlink Reference

Replace “Web Page URL” in the hyperlink reference above with the URL of the web page you want your button to link to. Make sure to enclose it in quotes.

2) Create the Image Source Code

Host your image somewhere online.  I use Photobucket.  Once you’ve uploaded your image, replace “Image URL” in the sample code above with the URL to your image.

3) Insert your new Button Code into the vessel of your choice!

Paste the entire button code into a blog post (in the HTML view, of course) or into a sidebar widget!  And you’re good to go.

Troubleshooting

If you have trouble with the button code working, check your quotation marks.  You MUST have quotes around the URLs to the web page reference and the image source.

If you do, and it’s still not working, your quotes may have been changed to “smart quotes”.  Smart quotes are the curved quotation marks that distinguish an open quote from a close quote.  Of course your keyboard does not differentiate, but some computers convert them automatically.  HTML does not like smart quotes.  HTML wants straight quotes.  Because smart quotes are not always so smart and sometimes turn the wrong way, which gets the HTML all befuddled.  So.  You may need to take the code and put into a TextEdit program and then save it in HTML format, which should make the quotes straight, and then copy and paste the code into your widget.  I KNOW.  Life is full of inconveniences, though, so get over it.

Now you may be saying, okay, that’s cool.  But what’s a button for?

Blog buttons are basically a way to promote a website.

Other uses for buttons are:

1) Blog carnivals.  (Like the What I Learned This Week button on my sidebar).

2) Button ads.  (See the square ads on my sidebar.)

3) Buttons are used to display that you are a member of a group.  (Such as the Frigidaire Test Drive Team button on my sidebar.)

4) Buttons often promote another blog that you write for.  (Such as my Chic Critique and Philadelphia Moms Blog buttons.)

5) Design credits.  (Such as my DCR Design button.)

See?  A myriad of possibilities!  Got questions?  Leave ‘em in the comments!

If you want to know how to put a button with the code beneath for others to grab, feel free to email me.  I have tried to put the code in this post, and the post keeps reading the code and not displaying it properly.  :-(