Blogger Q&A Vol. 11 | Code An Image

how to code an image with html and a link, how to make an image click through to a link

Image Via Stylizimo

With Southern Blog Society as my other side job, the question I get most from our new members is how to add their badge to their own sites.  It took me a few times as a new blogger to research and do some trial and error before I figured out how to code an image with HTML.  It took too long to find a great tutorial that was basic and specific to my needs. Blogger seeking HTML code for a clickable image. That’s all I needed. Nothing fancy. So here’s my tutorial for all our new members, all my blogging friends (new and old who may not know how to do this), as this is a MUST to learn how to do.


 

Step 1 

Decide what image you’ll want to use and what link you want to have it click through to. Save this photo to your computer as you’ll need it for Step 2.

Step 2

Upload your image to a self hosting photo site like Flickr.  Once you upload it there will be a URL for the image that you’ll need for the code. The URL will look something like this for Flickr: https://farm8.staticflickr.com/7385/13988926378_cd50b983d5.jpg

You’ll want JUST this part of it. Do not grab anything else as sometimes the link to the photo includes other HTML aspects of it. You want just the piece that if you were to plug it into your search bar and type enter, it would generate JUST that photo. You can try it with the code above to see how it should look.k

Step 3 

Build your code.  Your code should look something like this:

<a href=”URL TO WHERE YOU WANT TO CLICK THROUGH TO” target=”_blank”><br /><img border=”0″ height=”220” src=”IMAGE URL” width=”220” /></a>

What this code basically means is, you’d like IMAGE URL to click through (and open in new tab) to the URL you want to click through to.  The width and height can be changed. But note, that if your image is a square, you’ll want these to be the same. You can do some simple math on it if you have a rectangle and so on.

The target=”_blank” is a standard code to add to links within HTML to have it open in a new window. I use this anytime I’m writing a post, or adding links to my sidebar so that people don’t stray from my site, but instead open new tabs and hopefully come back to my blog.

Step 4 

Install.  Whether you’re on Blogger or WordPress, it’s pretty much the same. This is an HTML code and not an image, so you’ll want to add a widget to your sidebar for HTML so that it’ll read this properly. Upload your code and then be sure to test it out to ensure your code is working properly.


 

 That’s it! It’s really that simple and you’ll feel like a coding genius afterwards.


 

 

6 Comments | June 25, 2014
Share:

6 thoughts on “Blogger Q&A Vol. 11 | Code An Image

  1. kate

    yay! just did this (successfully!). and you’re right – there’s a little strut in my coding step now. i’ll be tripping soon i’m sure.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *