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:

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.



  • comment
  • Facebook
  • Twitter
  • Pinterest
  • Google+
  • Stumble
  • Email
  • Leave a Reply

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



    Thank you for sharing! I spent my Sunday night learning this exact thing to get social media buttons on my blog!
    Casually Chic by Monique
    Follow me on: bloglovin’ & facebook

    Cathy, your Poor Little It Girl

    I love when you do these blogger Q&A posts! You really are a coding wizard!!

    Cathy, your Poor Little It Girl

    Emily Helm {life with emily}

    I love when you do these posts! More often than not I learn something! I remember having to google this some time ago!! 🙂

    Alisha @ The Alisha Nicole

    Im really loving your recent blogging posts! I wish I would have coding a picture was this easy a few months ago!

    Sara Miller- Style For The Seasons

    Totally bookmarking this for days I need a reminder– great post!

    Style for the Seasons


    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.

    • S H O P  M Y  I N S T A G R A M •

    Sign up below to get exclusive content, newsletters and daily posts!

    Plus, get my tips and a list of my 5 fall must haves when you sign up!