Links are hugely important to bloggers – helping to raise your site’s profile in search engines and bringing in new traffic and visitors.
Adding a link into text is simple enough for most of us, but have you ever wondered how to make an image into a clickable link?
Research demonstrates that images are increasingly important to web users and people are far more likely to click on a lovely picture than on a link buried in a paragraph of text.
So where do you start?
The good news is that making a blog badge or button is DEAD simple, and only involves you making an image, uploading it to the Internet and writing a small piece of HTML code (and not even that).
STEP ONE: MAKE AN IMAGE
First of all, you need to choose the image you’d like to have as the link. You might have a photo of your own, or you might prefer to use a “stock” image from the Internet. Compfight is a great way to find copyright-free images on Flickr, while Nounproject is great if you’re looking for more graphical images to illustrate a concept. Play around – crop the image, add a border, overlay some text, add some special sparkles if you like! This is the sort of thing you can do on Picmonkey in about 20 seconds flat. Save the final image as a JPG on your computer.
STEP TWO: PICK AN IMAGE SOURCE AND A DESTINATION
This sounds a bit technical, but what we mean is – now it’s time to choose where people are going to see your image – and where they’re going to end up when they click on it.
You can upload your image to your blog’s media library, and you’ll see that it is assigned a “file URL” – this is the address on the Internet where your image sits.
If you expect lots of people to embed your image on their sites, and you’re worried about hosting costs you can always upload your image to a site like Photobucket instead. The important thing is to make a note of the file URL (or image source).
Next, think about where you want the image to link to – a post on your site, or a category? Your blog home page? Your Pinterest account?
You’ve now got two URLs – your image source URL and a destination URL. Make a note of them both.
STEP THREE: MAKE AND SHARE YOUR BADGE
How complicated this process is depends on what you want your badge to do.
If only you will be using the badge in a blog post, you can simply upload the file to your media library, add it into a post and click on the “link” symbol in your compose window. Add the destination URL and click save. Voila. Job done.
If you want to share the badge and let other people ‘grab’ the code then the good news is this awesome little site will do the heavy work for you – you just type your blog name (or the name of the meme, if it’s a badge for a specific “thing”) in the first box, the destination URL in the second box, and the image URL in the third box. Scroll down and click ‘preview’ and the site will generate a little image of your badge, with the code people will ‘grab’ below it. If you’re happy with what you see, just click “get code” and then copy and paste the code you see on the site.
Once you’ve copied this code, you can either paste the code into a blog post (be sure to switch from visual to HTML/TEXT view first) or paste it into a new TEXT widget or gadget in your blog sidebar. The result will be something like this:
<div align="center"><a href="https://www.foodies100.co.uk" title="Summer Berry Challenge"><img src="https://www.foodies100.co.uk/wp-content/uploads/2013/04/postpic2.jpg" alt="Summer Berry Challenge" style="border:none;" /></a></div>
Want to just use the badge and not share the code with anyone else?
A quick cheat is to use the method above, grab the code from box created in the resulting widget/post, add just that part to a new post/widget and delete the original post/widget.
But if you want to know how to write the code for a clickable sidebar image, here it is. You can customise this code and add to a text widget or gadget – but please note, you MUST write the code yourself into a text editor like Notepad or TextEdit, rather than copy/pasting it from this post, or using Microsoft Word – if you do either of those things, the code gets corrupted, and almost certainly won’t work.
Here’s what the code you’re going to write looks like:
<a href = “http://www.destinationurl.com” title = “Your chosen title”><img src = “http://www.imagefileURL.com” alt = “keyword for SEO purposes”/></a>
Some things to note:
- The first URL is where the image clicks through to
- Your title might be your blog name or the name of a weekly meme such as “summer berry challenge”
- The second URL is the location of the image uploaded to your site, or Photobucket etc
- The alt tag is a useful way of adding keywords to your image, to help with SEO – and also for people who may not be able to see your image, for whatever reason