How To Open Pictures in a New Window or Tab with Blogger

Hand Cursor New Tab Image Open

If you have more than one picture in your Blogger posts then you may wanna have those images open in new windows or tabs. The default setting with Blogspot blogs is to open the picture within the same tab, forcing your reader to go back and forth from full article view to picture view.

So let's dive in and learn how to open pictures in new tabs with Blogger:
  • What you need to do is to upload an image to your post editor and switch to Edit HTML. 
  • Notice the content between the first pair of  HTML brackets "< a href= ...... >".
  • Add the following attributes according to your desires, before the closing braket (>): target="_blank" (opens item in new tab) or target="nw" (opens item in new window).
  • Publish your blog post and you're done.
Now your blog visitors will be able to read your articles and view pictures in new tabs whenever they click on them.

The code below highlights where you must ad the target attribute.
<a href="http://2.bp.blogspot.com/_dDUHPa7QgaM/THdq2rli9MI/AAAAAAAAD6g/2tN_aS0G6tg/s1600/Pictures+Opens+in+New+Tab+Window.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
target="_blank" ><img border="0" height="302" src="http://2.bp.blogspot.com/_dDUHPa7QgaM/THdq2rli9MI/AAAAAAAAD6g/2tN_aS0G6tg/s400/Pictures+Opens+in+New+Tab+Window.png" width="400" /></a>

The "nw" value of the target attribute delivers a popup window.
<a href="http://2.bp.blogspot.com/_dDUHPa7QgaM/THdq2rli9MI/AAAAAAAAD6g/2tN_aS0G6tg/s1600/Pictures+Opens+in+New+Tab+Window.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
target="nw" ><img border="0" height="302" src="http://2.bp.blogspot.com/_dDUHPa7QgaM/THdq2rli9MI/AAAAAAAAD6g/2tN_aS0G6tg/s400/Pictures+Opens+in+New+Tab+Window.png" width="400" /></a>

Happy blogging!


Thanks for stopping by! Share this article with your friends.

13 comments :

  1. Thanks Constantin, that always bothered me. Now to find time and remember to make the change.

    ReplyDelete
  2. Thanks for the advice... This is one of the more annoying aspects, I hope I can straighten it out.

    ReplyDelete
  3. Great but how do you open a photo in a new, non-browser window? Just an enlarged photo no title bars etc.

    ReplyDelete
  4. I guess you're referring to flash picture slideshow... I don't know how to do that.

    Check out these search results.

    ReplyDelete
  5. Thanks for this tip, much appreciated.
    Is there a way to size the pop up window to match photo size?

    ReplyDelete
  6. Hey, Robb! There is a way to do that but I never did it myself. I guess one has to add a width and height attribute to the window code.

    See this link.

    ReplyDelete
  7. Hello Constantin, Thanks for getting back to me. I found a solution here:

    http://myfundoo-blog.blogspot.com/2010/04/make-images-open-in-popup-window.html

    Simple instructions, code provided and it works!

    ReplyDelete
  8. Cool. That's useful stuff! Perhaps at some point I may wanna do that as well.

    Thanks for the link!

    ReplyDelete
  9. Thank you Constantin. This really helps! I wish Blogger would add a shortcut to do this automatically so I don't have to make that change for every photo... but alas, practicing HTML is not so bad!

    ReplyDelete
  10. Hey, Michael! Yes, I'm also a bit disappointed with Blogger for this issue. You're right about HTML - learning it is useful.

    Cheers!

    ReplyDelete
  11. thank you, this was very helpful.

    ReplyDelete

Please use your personal name and NOT your business name to comment. Enjoy the blog, the T-shirt designs and thanks for joining the conversation!