Sometimes you want to make an image clickable, meaning, you want someone to be able to click on an image and be taken to a page you specify. In other words, you want the image itself to be a link.
Several people have asked me how to make images in their sidebar clickable. Here's how…
Photo by Yandle.
Step 1: Create (or Save) the Image
If you have not already saved the image to your computer, do this first. (If you need to create an image, check out my video tutorial on my blog button post. It shows you an easy way to create simple images.)
Step 2: Upload the Image to Your Server
Using WordPress, you can upload the image via FTP, or, upload the image via your Dashboard. Here's how:
- While logged into your Dashboard, click Media (in the left column).
- Choose Add New from the submenu.
- On the new page, click Select File. A window will pop up allowing you to navigate to the place where your image is stored on your computer.
- Once the image is uploaded successfully, copy the "File URL" (which is automatically assigned). The "File URL" field is located at the bottom of the upload window so just scroll down until you see it. This is your image location URL.
Step 3: Insert the HTML in a Widget
You will need two pieces of information for this step:
- The landing page URL. This is the address of the page/post/site where you want the user to land when they click on the image.
- Image Location URL. The URL specifying where the image is located (that you obtained in Step 2 above).
To insert the image and make it clickable, slide a Text Widget into your sidebar. (Here's how to use widgets in WordPress).
Paste the following code into the Text Widget. Once it's in there, switch out the bolded URLs below with the two pieces of information you have on hand. Simply paste the URLs between the quotation marks. (Be very careful not to accidentally delete the quotation marks in the process.)
<a href="http://LandingPageURL.com"><img src="http://ImageLocationURL" /></a>
To make the link open in a new window…
If you want the new page to open in a new window you would simply add "target="_blank" to the first piece like so:
<a href="http://LandingPageURL.com" target="_blank"><img src="http://ImageLocationURL" /></a>