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:
CODES FOR THE OLD POST EDITOR:
<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>
<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.
Great tip! I wrote a post about this too!
ReplyDeleteVery helpful. I always wondered how to do this. Thank you.
ReplyDeleteDr.Sameena Prathap9/21/2010
Hi,
ReplyDeleteGreat article...good tip...
Dr.Sameena@
www.lovelypriyanka.blogspot.com
Wow ! thank you so much..I'll try this wonderful tip on my blog..Thanks for sharing..
ReplyDeleteThank you very much. This really worked for me.
ReplyDeletePeople 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.
ReplyDeleteI think you can delete the larger image in your picassa account? Is that where blogger stores images?
Thank you for sharing.
Paul
If you delete the photo in Picasa web album, your displayed image will be blank, replaced by a blank square
ReplyDeletei just found your Blog!
ReplyDeleteyou 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
Keren!
What is the blog URL? Send me the template via my contact form
ReplyDeleteDear Peter,
ReplyDeletehello, 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.
Regards,
Eva (evatarida.blogspot.com)
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:
ReplyDeleteWarning: 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.
The tip is really very nice. I also have used it.
ReplyDeleteThanks for this tip... really appreciate it. I have had problems with people copying my images and using it on their websites or facebook pages.
ReplyDeleteI 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?
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
ReplyDeletehi,
ReplyDeletei 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
Thanks.
Nisha
Sign into dashboard > design > template designer > layout
ReplyDeleteand drag the slider to the width you want
thanks for the code. i got it and my images are now safe.
ReplyDeleteSirish Kumar
So helpful!! Thank you much for posting.
ReplyDeletehi...why i can't find the code?
ReplyDeletesorry...i cant find those code
ReplyDeleteFarah, to see the codes you have to be using the Edit HTML mode and not the Compose mode
ReplyDeleteHi Peter
ReplyDeleteFound your blog not so long ago and trying out some of the tips. This one didn't work at all.
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.
ReplyDeleteAwesome tutorial!!! Thank you =)
ReplyDeleteHello, 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?
ReplyDeleteYou are pretty much a genius.
ReplyDeleteI 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?
ReplyDeleteI am guessing probably not but had to ask!
Thanks,
Linda
As you guessed correctly you will need to do it one by one or use other ways to display your photos in your blog.
ReplyDeleteHi Peter
ReplyDeleteI 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:
http://whatchickstalkabout.blogspot.ca/
thanks
pam