How to turn your graphic into a clickable button readers can use on their site

OK- I hope this article comes out right. I’m not used to writing ABOUT html code, but the topic is so important that I need to share it.

So- it’s arts and crafts time, blogger style.

Step 1- create your graphic

If you already HAVE a graphic, you can skip ahead a few paragraphs to the coding section of this article. If not, then you need to create one.  GIMP is a free graphic design program that works so very closely to the way Adobe Photoshop works. It seems like a shame to spend a few hundred dollars on PhotoShop when GIMP is so awesome.

Be sure you use only rights-cleared images in your design. Also, you should consider wisely the SIZE of your proposed button.  I make mine 125×125, it’s pretty standard.  For one of my sites, I plan to experiment with a few different sizes and dimensions, like banners and skyscrapers. I’ve seen this done nicely on another site (can’t remember, sorry) where a blogger had an entire page devoted to different ways readers can link to her blog, with various graphics in several sizes, some designed to link to the front page and others designed to link to specific noteworthy posts.

Step 2- Upload your graphic

If you’re using WordPress, just click “media” on the left sidebar and add the image to your library. If you’re using Blogger (why aren’t you using wordpress?) you’ll need to create a post with the image and save it as a draft in order to find the file location for the image

Step 3- Make the code

OK- the code we’re making is to SHOW the graphic, with a text area underneath it where readers can highlight and copy the code in order to paste it on their site.

In order to create the graphic image link, replace the red text below with YOUR specific URL and the green text below with YOUR image file

<a href=”http://www.yourwebsite.com“><img src=”http://www.yourwebsite.com/images/yourpicture.jpg“></a>

That’s the simple code to CREATE the graphic link. Most of you probably could have figured that out on your own.  Place that code in your sidebar to SHOW your graphic link to your own site.

Step 3 part 2- Give readers the code

That’s the tricky part because the minute you put code in your sidebar, it comes to life, right?  I was able to enter the code above directly into a visual editor on WordPress, so that the code shows, instead of coming to life.  In order to allow readers to copy the code, you need to protect it by putting it in a text area.  The red text below shows what I’ve ADDED to the code, in order to protect it.

<textarea><a href=”http://www.yourwebsite.com“><img src=”http://www.yourwebsite.com/images/yourpicture.jpg“></a></textarea>

Entire Code

(note that I added a line break <br> in between each section so it would be stacked, instead of side by side)

<a href=”http://www.yourwebsite.com“><img src=”http://www.yourwebsite.com/images/yourpicture.jpg“></a>
<br><textarea><a href=”http://www.yourwebsite.com“><img src=”http://www.yourwebsite.com/images/yourpicture.jpg“></a></textarea>


One important note about this method is that users don’t have to save the image to their own server.  There are a few advantages to this

  1. You have complete control of the image and can change it at any time, simply by uploading a new graphic (be sure to use the same filename and directory)
  2. It’s easier for people to copy & paste than to upload and create their own code
  3. Your image is less likely to be stretched, resized or otherwise distorted

Here’s an example of what the entire system looks like, in case you’re still not sure what I’m talking about