Blog Design For All: Easy Clickable Images

In this, the inaugural tutorial of our new Blog Design For All! series, we show you a quick and dirty method for making your images clickable (like the one above) to an outbound link. We'll also demonstrate how to tag your clickable image with simple HTML markup language so that the user sees a small bit of text near the cursor when she mouses over it. Although we'll be illustrating these techniques within the context of the Blogger platform, it should be noted that they may be incorporated into any website and/or free blogging site like Wordpress. Now, on with the show!

Step 1: Upload your image (already sized to fit the allotted space on your blog, preferably) to a free photo hosting site like Flickr.

Step 2: In your Flickr photostream, find and select your recently-uploaded photo by clicking on it. Next, click on the 'Share this' drop-down menu and select the 'Grab HTML' option. In the new drop-down menu that appears underneath the HTML code, select the desired image size (i.e., the size you originally uploaded) and copy all of the HTML code that appears in the window above the size menu drop-down.

Step 3: In your Blogger publishing window, select the 'Edit Html' tab and paste the HTML you just copied on Flickr into the window. Click on the 'Compose' tab to check that the photo appears in the proper place among the other elements on the page.

Step 4: Back in the Blogger 'Edit Html' window, find the code you just inserted and replace the Flickr url after a href= with the url of the webpage that you'd like your image to point to. In the highlighted example above, http://www.flickr.com/photos... has been replaced with http://huzzahvintage.com/product... so that users are now taken to the product page for the pictured jacket instead of the Flickr page on which the image is hosted. Voila! You're done.

Extra Credit: Change the text inside the quotation marks after title= to whatever you like (a description of the image, special promo code details, etc.). Now, when the user mouses-over the image, she will see your special message and not the Flickr-generated title.

Extra Extra Credit: If you don't want users to leave your blog entirely, and would prefer, instead, that a new browser window open up upon click, simply add the tag target="_blank" after the title tag.

The end result:

* Next week we'll show you how to make a more stylized series of clickable images, like those featured in this post.

Blog Design For All

Exactly one year ago this week we began blogging with little direction and even less technical knowledge of this series of tubes known as 'the Internet'. We were so daft, in fact, that we understood a widget only as a unit of production and javascript only as the typeface on a bag of coffee. After 52 weeks and much googling, though, we've accumulated quite a bag of programming and design tricks, and we've recently begun to wonder if perhaps our readers wouldn't be interested in learning how to implement some of them on their own sites? From simple operations like removing the thin, branded Blogger banner from the top of your blog to more complex hacks like tracking outbound links to sites like your Twitter account and your sponsors' websites, we can help pull back the proverbial curtain standing between you and all those zexy blogs you've been swooning over.

SO, leave us a note about what trick(s) you'd like revealed, and, assuming there's enough interest (and we're fluent), we'll start spilling the beans in a weekly tutorial geared explicitly toward you, Gentle Reader of the Huzzah! logbook.