With The Blog Societies as my other side job, the question I get most from our new members is how to add their badges 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.
How To Code An Image With A Link For Your Blog
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
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 show and 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.
