Friday, September 20, 2013

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;"><a href="http://4.bp.blogspot.com/-2m9XCD-f9QM/UjutsaY6HTI/AAAAAAAAEb4/vbzljJ2SZvY/s1600/book+google+blogger+for+dummies.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-2m9XCD-f9QM/UjutsaY6HTI/AAAAAAAAEb4/vbzljJ2SZvY/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.:


3 comments:

  1. Peter! It worked!! (Yippee!)
    You helped me to FINALLY figure this out.

    I am so thankful; thank you for patience. Aloha!

    ReplyDelete
  2. Many thanks! It worked for me too.
    A happy blogger who knows nothing about code :-)

    ReplyDelete
  3. Thanks so much I have tried forever to get this right and you did it,

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics