Pages

Creating a Picture Link in Blogger Posts


By default, when a user clicks a picture in a Blogger post, the picture opens up in a light box. However, you can also create a picture link so that when a user clicks a picture, a new blog or a website will open. For example, the above image is linked to this post itself which is very handy. In this tutorial, I'll explain how you can link a picture to any blog or webpage.

Default Behavior of an Uploaded Image!


I've uploaded the following image and did not change anything in it. Click and it will open in a light box:


Let's link the above image to some blog or webpage.

Creating an Image Link in the New Post Editor


First of all, upload an image. I'll upload the above image in my post. After that, switch to the HTML mode of post editor.


HTML mode shows the HTML code of uploaded image. By default, Compose mode is enabled which is easy but doesn't allow code editing. Anyway, here is the code of my uploaded image:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-cUktJcrMGMY/UC4_fMK2XXI/AAAAAAAAFtM/91N_RkXb-9E/s1600/flower.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="http://3.bp.blogspot.com/-cUktJcrMGMY/UC4_fMK2XXI/AAAAAAAAFtM/91N_RkXb-9E/s400/flower.jpg" /></a></div>

Note: Don't worry, your code will not be exactly the same because different images have different names, dimensions and alignment.

Please note that there will be 2 addresses or URLs in the uploaded image. For my image, these URLs are:

http://3.bp.blogspot.com/-cUktJcrMGMY/UC4_fMK2XXI/AAAAAAAAFtM/91N_RkXb-9E/s1600/flower.jpg
&
http://3.bp.blogspot.com/-cUktJcrMGMY/UC4_fMK2XXI/AAAAAAAAFtM/91N_RkXb-9E/s400/flower.jpg

There is only 1 difference in the image URLs which is s1600 and s400. First URL with s1600 is actually the link URL. It is responsible for making this image a link. Second URL with s400 is the source URL. It displays the image.

As I've told you that the first URL is responsible for making image a link so, we need to change the first URL in our image code. For example, if I want to link the above uploaded image to my blog's homepage which is http://www.betatemplates.com/, I'll only replace the first URL of image with the URL of my blog's homepage. After that, the image code will look something like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.betatemplates.com/" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="http://3.bp.blogspot.com/-cUktJcrMGMY/UC4_fMK2XXI/AAAAAAAAFtM/91N_RkXb-9E/s400/flower.jpg" /></a></div>

As you can see that I've only changed the first URL. Second URL is still an image. Now, if you'll click the following image, it will take you to my homepage.



Make Image Link Open in a New Window or Tab

If you're linking your image to some other blog or website then it is a good practice to make it open in a new window or tab. By doing this, visitors will stay on your blog.

To do this, I'll just add target="_blank" in the image code just after the link address. The code will look like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.betatemplates.com/" target="_blank" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="http://3.bp.blogspot.com/-cUktJcrMGMY/UC4_fMK2XXI/AAAAAAAAFtM/91N_RkXb-9E/s400/flower.jpg" /></a></div>


And here is the image itself. Just click and my blog homepage will open in a new tab/window.

102 comments:

  1. Thanx: just what i needed! :)

    ReplyDelete
  2. Perfect instructions! Thank you!

    ReplyDelete
  3. Thanks for the very clear and concise instructions. So easy to follow.

    ReplyDelete
  4. i think now i got something helpful

    ReplyDelete
  5. thanks so much for posting this! :) really easy to understand and very helpful! :)

    ReplyDelete
  6. woah! this helped me sooooo much, thanks a ton for posting!

    ReplyDelete
  7. Thank you soooo much...it was really really helpful :)

    ReplyDelete
  8. Replies
    1. Hi Mrs4444, I'd really appreciate if you could add a link back to my blog. The link code is available at the bottom of this blog.

      Delete
  9. Thanks. Very helpful - and easy.

    ReplyDelete
  10. This was great. It was very easy to follow and just what I needed. Thank you!

    ReplyDelete
  11. thanks a lot .. it really works very well.. simple but useful instructions...:)

    ReplyDelete
  12. I've beat my head against the wall for an hour now trying to get this to work, it just won't make my image into a link. Also, you said to change the s1600 URL, but in your example you changed the s400 URL. What Am I missing?

    ReplyDelete
    Replies
    1. Hi Jeremy, this tutorial is outdated. I'll update it this weekend. Please check back next week :)

      Delete
  13. Thank you thank you thank you thank you! I usually have SUCH a hard time with these things, my mind doesn't quite want to always work this way, and this was so simple and easy for me to understand. Nailed it!

    Much appreciated.

    ReplyDelete
    Replies
    1. Hi Amy, thank you for such kind words. Please link back to this blog, I'll really appreciate it :)

      Delete
  14. You're my hero. Thank you so much!

    ReplyDelete
    Replies
    1. hi Caroline, thank you! that's really encouraging. Please link back to this blog, I'll really appreciate it :)

      Delete
  15. Gotta add my thanks to the long list!

    ReplyDelete
  16. Thanks also. Great instruction. I would like very much to create a photo gallery in blogger. As I have come to learn there doesnot appear to be easily available free templates for a personal family memories photo journey. Following many links, this tutorial will help ... i.e. I have say 10 photos about a child birth, I post one photo (main photo) and use this tutorial and photo link to the mini photo gallery in Google + the remaining photos. I cannot seem to find a non-tech way for me to display multiple images when I click the main photo in Blogger. Closest I seem to come is here http://simplexportfolio.blogspot.com/ ... but I cannot get the D$^%$#$% thing to properly upload the xlm file. Any help is approeciated. BobK

    ReplyDelete
    Replies
    1. Hi Bob, thanks for your appreciation. I would recommend you to check the Dynamic Views templates for Blogger. You can check them on a test blog. Just upload some pictures in different posts and apply Dynamic Views from the Template section. They offer some awesome photo blog layouts.

      Delete
  17. Great post, exactly what I was looking for. But where can I find the updated version, as mentioned in the comments?

    ReplyDelete
    Replies
    1. Hi Ruth, the version on this page IS the updated version where you've commented and I'm replying :)

      Delete
  18. Thanks a million for this!! Very clear and easy to follow. :) Been trying to figure this out all evening!

    ReplyDelete
  19. Replies
    1. Hi Rachel, I'm glad it worked for you. Kindly add a link back to this blog. I'll really appreciate that.

      Delete
  20. Thank you so much!!! I've been looking for instructions for this for ages, and finally found yours. Very easy to follow.

    ReplyDelete
    Replies
    1. Hi Liz, kindly add a link back to this blog to support it :)

      Delete
  21. Thanks so much, this made it so easy I have been wanting to do this for some time..

    ReplyDelete
  22. i really thank you..thats was useful..thanks again.

    ReplyDelete
  23. Perfect instructions! Exactly what I needed! Thank you!

    ReplyDelete
  24. thanks for your kindly sharing i learn a lot

    ReplyDelete
  25. Your blog is wonderful! i am recently tring 'revamp' my blog and it is really helping me out - question, is there a way to add a picture to my blog and by clicking on the image it will take the reader to a list of related blog posts??? (i.e. having a picture of food and clicking on it will take the reader to a list of posts with recipes). thank you for enlightening us newbies :)

    ReplyDelete
    Replies
    1. Hi Dee B,

      I think you want to create a picture link in the sidebar (or somewhere else) which will be linked a set of posts. Well, that can be done for a small fee :) Contact me @

      levisinside0@gmail.com

      Delete
  26. Didn't work :( None of my pictures are linking!

    ReplyDelete
  27. Thank you so much! Worked very well!

    ReplyDelete
  28. Thanks a mill - just used this on my blog

    ReplyDelete
    Replies
    1. Hi Chris Cuada, I'll be grateful if you could link back to my blog.

      Regards,
      Bilal :)

      Delete
  29. Replies
    1. I'm glad it worked for you echid. Please link back to this blog.

      Regards,
      Bilal

      Delete
  30. Many thanks for this, got it on the third try :-)

    ReplyDelete
    Replies
    1. Ooops 3rd try. Anyway, please link back to this blog as well.

      Regards,
      Bilal

      Delete
  31. Thank you so much for this post!!

    ReplyDelete
    Replies
    1. Thanks for commenting Tricia. Please link back to this blog as well.

      Regards,
      Bilal

      Delete
  32. THANK YOU!!! I got it to work!

    ReplyDelete
    Replies
    1. Thanks Erica! Please link back to my blog.

      Regards,
      Bilal

      Delete
  33. My picture only had one URL, not two. I did try addng the URL needed since there was nothing there to change, but that didn't work. Why does my uploaded photo show only one link?

    ReplyDelete
    Replies
    1. Hi Twyla, Can you please share the image code with me? Did you uploaded the picture from your computer or from web? What is your blog address?

      Delete
  34. Thank u i was really looking for that :)

    ReplyDelete
    Replies
    1. Hi Yohan, glad I was helpful. Please link back to this blog.

      Regards,
      Bilal

      Delete
  35. Thank you! Great help. Was always wondering how that worked!!

    ReplyDelete
    Replies
    1. Hi Iris, you are welcome. Please show your love by adding a link back to this blog. Thanks.

      Regards,
      Bilal

      Delete
  36. Thank you a lot for taking time to write helpful articles for bloggers!^-^

    ReplyDelete
    Replies
    1. Hi Evelina, you are welcome. Please link back to this blog.

      Regards,
      Bilal

      Delete
  37. That is just what I am looking for except I just have one question! The page I want my picture to link to is just another page on my blog. Where do I find the URL for that page? Since it is not yet connected to anything I am not seeing what the URL is?? please help:)

    ReplyDelete
    Replies
    1. Hi Emily, what page you are talking about? Give me your blog address. If that page is a post on your blog or a static page then it should have an address or URL. You can simply open that page and copy whatever is in browser's address bar.

      Delete
  38. So here's my dilema. I tried this but my pictures from my main page still just open in lightbox. (It does work when you get to the individual post)

    I have a portfolio site that just shows the pictures and then I want people to be able to click on the pictures and have it take them to the blog post. I don't have titles on my post because I want a clean look.

    Any suggestions would be appreciated :)

    Jana
    http://www.janaleemiller.com

    ReplyDelete
  39. Hi Jana, apparently it should work on main page as well. Please contact me on email to take things further.

    levisinside0@gmail.com

    ReplyDelete
  40. maybe you can help me. im using the code <div class="separator" on my blog but the image doesn't open in a light box. instead, it opens the image as a link. im using an edited template so im thinking only the blogger-ready templates have this capability. can you please check? thanks

    ReplyDelete
    Replies
    1. Hi K, you can hire me to fix this issue.

      levisinside0@gmail.com


      Regards,
      Bilal

      Delete
  41. Thank you so much for this, took hours to find something like this that actually works. Please note, when doing this via html editor, click to publish the post then go to the blog to see if it worked, at first the way I was doing that it would not work for me is clicking preview while making the blog post.

    ReplyDelete
  42. Interesting post! Can you please tell me why Google image search index some pictures with S400 URL and other with S1600 URL?

    ReplyDelete
    Replies
    1. Hi Birdy, I have no idea why Google does that :(

      Delete
  43. Hey there! This is exactly what I was looking for! BUT I'mhaving a problem, the image I have uploaded only has ONE url. I went to my blog page and if you click the image it does NOT open in a light box so I must be missing something. Have I done something wrong? What do I do?

    Sam

    ReplyDelete
    Replies
    1. Hi Sam, can you email me the code of uploaded image from HTML mode of post editor?

      levisinside0@gmail.com

      Regards,
      Bilal

      Delete
  44. Thank you so much for the help!! :) You are awesome!!

    ReplyDelete
  45. Why don't you just use the LINK function that you've highlighted in the first picture?

    ReplyDelete
    Replies
    1. Hi eachdainu, that LINK function is to link text with a web link. In simple words, that button creates a text link while this tutorial is about making an image/picture link. I hope my explanation makes sense :)

      Cheers,
      Bilal

      Delete
  46. This was so easy to follow and helped me immensely! Thank you so much!!

    ReplyDelete
  47. So how does this work when the image is not uploaded to blogger but used form another site?

    ReplyDelete
    Replies
    1. Hi Baukje, click image upload icon, enter the image URL instead of uploading your own image. After adding the image, you'll see same type code in the Blogger HTML post editor. You just need to replace the first URL with your own desired address. Second URL must not be changed as it the source image.

      Delete
  48. Didn't help at all, they must have changed the code because no s1600 or 1400 comes up anymore. I tried to link this image and nothing
    http://www.abc-clio.com/controls/coverimage.aspx?isbn=9780313267833


    code:



    Frankly blogger stinks

    ReplyDelete
    Replies
    1. Hi Harnanday,

      As you can see in the comments, it has worked for so many people. I wonder if there is something wrong with your blog.

      Bilal

      Delete
  49. Thank you! Thank you! Thank you! There is hope for people like me. After an afternoon of frustration, I finally found your simple to follow instructions. It made a big difference in my day. Other people make it so hard and don't give good enough instructions for dummies like me.

    ReplyDelete
    Replies
    1. Awww thank you. That was a really sweet comment.

      Cheers,
      Bilal

      Delete
  50. thankyouuuuuuuuuuuuuuuuuuuuuuu according to my demand

    ReplyDelete