Tuesday, September 21, 2010

Make images uploaded via Blogger unclickable

Many bloggers want their uploaded images not clickable probably because they don't want their images especially the enlarged version to be copied. Previous post How to make images not clickable (not enlarge) provided a method in varying circumstances may not work.

Here is a more efficient method and failsafe method. All one need to do is after uploading an image via Blogger image upload icon to switch to Edit HTML mode if one is not already in this mode.

Now depending on which post editor you had use, the HTML codes used to display images that Blogger generate upon uploading is different. We will deal with the old post editor (my preferred post editor) first as it is easier to explain and deal with the new updated post editor later:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_jizoPL28qCY/SpEIlvjfinI/AAAAAAAADBo/nYU8u4C1_6Q/s1600-h/BlogStar.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 178px; height: 67px;" src="http://1.bp.blogspot.com/_jizoPL28qCY/SpEIlvjfinI/AAAAAAAADBo/nYU8u4C1_6Q/s400/BlogStar.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5373085274943228530" /></a>

Please note that only the code in black is needed to display the image. Those highlighted in red are not needed to display the picture and can be removed safely leaving only
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 178px; height: 67px;" src="http://1.bp.blogspot.com/_jizoPL28qCY/SpEIlvjfinI/AAAAAAAADBo/nYU8u4C1_6Q/s400/BlogStar.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5373085274943228530" />.

Thus to make the image not clickable, all you need to do is just to delete those codes highlighted in red. I have tested that successfully over at Test to make images uploaded via Blogger not clickable.

New post editor

We will now deal with the new post editor which is not my preferred post editor. The codes to display the uploaded image generated by Blogger with the new post editor is as follows, again with the code to display the image in black while the codes in red are to make the image clickable to display an enlarged image. The codes in blue is to center the picture and can either be removed or left in place (note: center will be replaced by left or right if you had elected to float the image to the left or right but that will not affect the explanation to make the image not clickable):

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_jizoPL28qCY/TJd1Iv7emMI/AAAAAAAADiE/8aV0WwnWI4g/s1600/BlogStar.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_jizoPL28qCY/TJd1Iv7emMI/AAAAAAAADiE/8aV0WwnWI4g/s320/BlogStar.gif" /></a></div>

Again, only the code in black is needed to display the image while those in red are used to make the image clickable to enlarge the image while those in blue is meant to center the image. Thus if you want the image not clickable, just delete those highlighted in red (<a....> and </a>) and those highlighted in blue too leaving those in black intact and the image will still be displayed. Alternatively we can just delete those codes in red to make the image unclickable while leaving those in blue intact to center (or float) the image.


  1. Great tip! I wrote a post about this too!

  2. Very helpful. I always wondered how to do this. Thank you.

  3. Hi,

    Great article...good tip...



  4. Anonymous9/21/2010

    Wow ! thank you so much..I'll try this wonderful tip on my blog..Thanks for sharing..

  5. Anonymous9/22/2010

    Thank you very much. This really worked for me.

  6. Anonymous9/22/2010

    People can still steal the large version of your image... they simply right-click "view image," and then change the URL to include the "s1600" in the path... this is a direct link to the larger image.

    I think you can delete the larger image in your picassa account? Is that where blogger stores images?

    Thank you for sharing.

  7. If you delete the photo in Picasa web album, your displayed image will be blank, replaced by a blank square

  8. i just found your Blog!
    you are SO awesome :)

    i followed the instructions to add 2 more ADD a Gadget to my lay out page! :)

    But i havent figured out how to add another one above my 2 rightside columns..did i make any sense? lol
    if i did could you help??

    your newest follower and fan

  9. Dear Peter,
    hello, there..
    i go to blogger help, and your link is what I found.
    Could you please help me, for I accidentally removed my Blogroll gadget. I went to blogrolling.com to get the code again, but unfortunately, every time I entered the link codes to the gadget link space from blogger, always appeared a notification that the gadget is broken.
    Could you please help me? Thank you.

    Eva (evatarida.blogspot.com)

  10. This blogrolling.com is a third party provider and when I tried adding a test blogrolling.com gadget, I obtained this result so test halted:

    Warning: Visiting this site may harm your computer!
    The website at testing-blogger-beta.blogspot.com contains elements from the site rpc.blogrolling.com, which appears to host malware – software that can hurt your computer or otherwise operate without your consent. Just visiting a site that contains malware can infect your computer.
    For detailed information about the problems with these elements, visit the Google Safe Browsing diagnostic page for rpc.blogrolling.com.
    Learn more about how to protect yourself from harmful software online.

  11. The tip is really very nice. I also have used it.

  12. Thanks for this tip... really appreciate it. I have had problems with people copying my images and using it on their websites or facebook pages.

    I just wish it were easier than having to delete code all the time... If my blog had 10 pictures... it'd take forever :)

    Is there perhaps a way to add an images page to my blog but only allow certain people to view them?

  13. Rikhil, one can only make it more difficult for images to be copied but really there is no failsafe way to do that. I would suggest you look into watermarking your images. Refer to free watermark software to deter copycats

  14. hi,

    i just switched over to the blogger designer and selected a 3 column layout. My main image is huge and I want it to get cutoff but i'm not sure where to do this.

    Please take a look at this - Pumpkin Fry - http://ngstestblog.blogspot.com/ - notice how big the image is and goes to the right sidebar... how do i get the image to cutoff before going over? i've searched and searched.

    Please see the original image on how it gets cut off.. - http://www.honeywhatscooking.com/2010/10/gummadikayi-vepudu-kaddu-fry-pumpkin.html


  15. Sign into dashboard > design > template designer > layout

    and drag the slider to the width you want

  16. thanks for the code. i got it and my images are now safe.

    Sirish Kumar

  17. So helpful!! Thank you much for posting.

  18. hi...why i can't find the code?

  19. sorry...i cant find those code

  20. Farah, to see the codes you have to be using the Edit HTML mode and not the Compose mode

  21. Hi Peter

    Found your blog not so long ago and trying out some of the tips. This one didn't work at all.

  22. cina.fong, it is just not possible for this method of making the image unclickable not to work. Perhaps the failure you are talking about is the image not displaying, then it is likely you have not deleted the sections of the code properly and the <img> has some part missing or something similar.

  23. Awesome tutorial!!! Thank you =)

  24. Hello, people Can still stole a image simply by printing a screen using print screen key and edit it with a Image Editing Software such as adobe photo shop...What can You Do Now?

  25. You are pretty much a genius.

  26. I really needed this information thank you!!! Just one question, Do I have to go photo by photo and delete the part of the code to make it unclickable or is there a way to make it standard in the settings everytime I load a photo onto my blog?

    I am guessing probably not but had to ask!

  27. As you guessed correctly you will need to do it one by one or use other ways to display your photos in your blog.

  28. Hi Peter
    I went through all my posts and pages with removing the html you suggest. But it seems that I can still do a save as on my pictures. Did I do something wrong?
    Also, how can I protect my pictures in my side columns, 'add a gadget' areas?
    Here's my blog:


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