How To Create Clickable Images
Here’s how you can make a picture into a link .like I did in my sidebar on my “old” blog. (My old design/theme)
First, of course, you will need an image you want to use.
You can hire someone on www.fiverr.com or www.elance.com and have them make an eCover like the one I have for my free E-book, or you can use one of your own pics.
After you have your jpg image, you’ll need to upload it to your FileZilla, into the public_html-folder:
NOTE: In this example with FileZilla I’m using a different image for a different project that I once had so the URL is not the same as in my E-book example. The process is the same regardless.
When you have done that, right-click on the image file in FileZilla and chose “copy the URL to clipboard”:
Open a WordPad (or Word doc or whatever you are using) and paste the URL into it. It should now look something like this:
Now, this is how you connect your link with your image:
Use this html code:
<img src=”PUT THE IMAGE URL HERE” alt=”” width=”200″ height=”240″>
You can of course make the image larger or smaller if you want to by modifying the height and width to something else, or remove it altogether and let the image have the size it has.
So, this is an example of how the html code looks like:
Remove this part of your image link: ftp://________@ and make a http-link of it instead as the pic shows:
As you can see in the pic above; the first URL is to my squeeze page for my free E-book, and the other URL is my images URL that I have now uploaded to FileZilla.
Also, remove this part in the code: “public_html”
The URL automatically loads from the public_html folder so you won’t need it in the URL.
Now it should look like this:
And if you want to tweak the size of the image you can add some code like I have done:
<img src=”http://www.mariaerving.com/wp-content/clarityexercise-copy.jpg” alt=”” width=”200″ height=”240″></a>
So after all the tweaking and uploading etc, you now have your html code ready to be pasted into your blog.
(You can use my code by copying it from my blog, just insert your own URL’s in it)
When you are done, copy it and paste it into a “text” widget in your WordPress back office.
Go to Appearance > Widgets > and chose a text box, drag it to your sidebar and paste the code in it, and save:
And there you have it! 🙂
This is how your own clickable image should work;
Click on the image below and you are redirected to my squeeze page for one of my free E-books:
Please note that if you opt-in on this mailing list, you are subscribing to yet another one of my lists. (It’s a live squeeze page, but I don’t write this list much anymore)