Making clickable picture in a post

One may want to make a picture, for example, a book cover, to be clickable (hyperlink) to link to, for example, an Amazon webpage. This will require you to use the HTML mode of the Blogger post editor.


First, save a copy of the book cover (or any picture) in your computer. Then, open the post editor in the HTML mode and upload the picture. You will get a bunch of codes like below:

<div class="separator" style="clear: both; text-align: center;"><ahref="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UU10GpRQzB9sO9GVkaRBqxMznbDa6MbvdNwnRDTMIDb4UGXKeS0oUQnI8NTSQG3rAebcrQ7mjAhfu2hVKjIFydPs5VOvzNZYutc5_wyyfpfcMLxaplSgpikiZ7mGPen_MjJQTcw-xt8/s1600/book+google+blogger+for+dummies.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UU10GpRQzB9sO9GVkaRBqxMznbDa6MbvdNwnRDTMIDb4UGXKeS0oUQnI8NTSQG3rAebcrQ7mjAhfu2hVKjIFydPs5VOvzNZYutc5_wyyfpfcMLxaplSgpikiZ7mGPen_MjJQTcw-xt8/s400/book+google+blogger+for+dummies.jpg" /></a></div>

If you are not familiar with the codes, don't worry. Just look for the blue href and concentrate on the green text between the 2 red quotation marks "". The green text beginning with the http:// is the web address (URL) of the picture.

Now all you have to do is to replace the green text with the web address (URL) of your target site and you are done. Try clicking on the picture of the book cover for example. Note that I have added the attribute target="_blank" to make it open in a new tab/window.:
Previous
Next Post »