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.
First, let me explain the basic button code. Here is the code to my Musings of a Housewife button.
Now let’s break it down. There are basically two parts:
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.
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.
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.
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.
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, use this code: