Two Ways to Add an Image Link

Plenty of times you might have the need to link a specific image or graphic to a new page. I use image links for social media buttons, category buttons, promoting my other businesses with sidebar images.

There’s two very simple ways to do this. The first is what I use 100% of the time, but both will work exactly the same.

Two Ways to Add Image Links to Your Blog — via @TheFoxandShe | www.blogbetterbyleap.com

1. HTML

If HTML seems scary, it’s really not and this is one of the most basic snippets ever. It’s also one that every blogger should know!

< a href="http://linkurl.com" target="_blank" >< img src="http://imageurl.com" alt="" / >< /a >
(this one will open in a new window)
or
< a href="http://linkurl.com" >< img src="http://imageurl.com" alt="" / >< /a >
(this one will open within the same window)

*To make these not show up as links, I had to add spaces – you can remove the extra spaces at the beginning and end of the carrots ‘< >‘. Don’t remove spaces other than those!

The ‘a href’ part is what holds the link and all we have to do is wrap the link code around the image. The first part of the ‘a href’ is the actual link that you want the image to go to and the second part is the target. The target refers to where you want to actually open that link. The target ‘_blank’ will open the image in a new window. If you don’t add a target, it will open within the same window. It’s a good rule of thumb to use the ‘_blank’ target when linking to external sites and pages and to use no target when linking internally.

[clickToTweet tweet=”Adding an image link really isn’t that tough — here’s a simple tutorial on how to do it!” quote=”Coding is easier than you thought, right?!”]

Drop in the image url into the img src space and then make sure you close the link tag after that. Closing tags always start with ‘

When you’re creating HTML links this way, make sure you’re working in the Text or HTML view of your post editor. Working in the WYSIWYG mode will not work.

FYI:
These two snippets can easily be edited to manually create a text link
< a href="http://linkurl.com" target="_blank" >Your Text Goes Here< /a >
(this one will open in a new window)
or
< a href="http://linkurl.com" >Your Text Goes Here< /a >
(this one will open within the same window)
*To make these not show up as links, I had to add spaces – you can remove the extra spaces at the beginning and end of the carrots ‘< >‘.

2. Plugins

Go to Plugins > Add New and search for the Simple Image Widget. You can also upload it manually via FTP. Once it’s installed and activated, you can go to Appearances > Widgets and drop the plugin into the desired widget area and upload the image you want, drop in the link and select the link target. This only works for the widget areas. If you have to drop in an image link into a different area like a page or post, you should use HTML.

Previous
Down South
Next
Sweet Summertime