Make Blogger Post Images Unclickable, Undraggable & Turnoff Right Click on them

If you use Blogger platform for blogging; then you can do three things which will contribute in a great way for protecting your images of blog posts. Making the blog post images (1) unclickable, (2) undraggable and (3) turn off right click on the images.

make blogger blog posts images unclickable

For Blogger, you have to get a bit technical to do these. But they are extremely easy to implement and compare to the benefit they are no hard work.

How to Make Images in Blog Posts Unclickable in Blogger Blogs

In most Blogger blogs; if a visitor clicks on an image, the image is loaded in the same browser tab of the visitor and visitor leaves your blog. Sometimes it opens the Blogger lightbox but many Blogger users do not use it.

Also in some cases the Blogger lightbox do not work such as turning off the blogger default widget JavaScript. And in that case too; the visitor leaves you blog post by clicking on the image too.

This is a bad user experience and visitor in most times do not hit back to revisit you post. This also increases you blog’s bounce rate. And most importantly in makes the coping of your images extremely easy. So you need to make the images in blog post unclickable.

When you upload an image and place it in the post editor of the Blogger dashboard, in the HTML view it looks like this;

<div class="separator" style="clear: both; text-align: center;">
<a href="//1.bp.blogspot.com/-eAcaM61-cxE/U-jgyNb-m9I/AAAAAAAAAFc/jRqTdOqv82Y/s1600/faviconr3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="techinfoknowimageurl.png" />
</a>
</div>

To make the image unclickable follow the instructions below;

  1. Click on the ‘HTML’ tab in the post editor and look for the image code like on in the above.
  2. As you see on the above code the image <img tag is inside of an anchor ( <a> ) tag. Remove the anchor tag. After changing it will look like this:
    <div class="separator" style="clear: both; text-align: center;">
    <img border="0" src="//techinfoknowimageurl.png" />
    </div>
  3. Repeat this for each image of your post.

This will make the image unclickable. However if you use Blogger lightbox, the image will not be view-able by it as Blogger lightbox required images to be clickable,

How to Make Images in Blog Posts Undraggable in Blogger Blogs

Another way to save images from a webpage is dragging. You blog’s images can easily be save in the copiers hard drive by a simple drag and drop action by the mouse or cursor pointer.

Actually dragging in not need neither does it helps the regular visitors of you blog. It only helps the thieves of your intellectual property, the images of your blog post. To turn of dragging of posts images in Blogger you can follow these solutions.

Adding ondragstart=”return false;” and in the <body> Tag

Best option is to add ondragstart="return false;" in the body tag. Go to Blogger dashboard > template editor > click edit HTML and search for <body .Add  ondragstart="return false;" to it like this:-

<body ondragstart="return false;">

This works on all major browsers on mobile and desktop.

Adding ondragstart=”return false;” Attribute in the <img> Tag

If you do not want to add ondragstart="return false;" in the <body> tag then you can add the in the <img tags. In the post editor add  ondragstart="return false;" like this;

<img ondragstart="return false;" src="techinfoknowimage.png"/>

Again; this works on all major browsers on mobile and desktop.

Pure CSS Solution to Stop Image Dragging

You need to add this css code in your Blogger template;

.post img {
     pointer-events: none;
}

Go to you Blogger Dashboard > Template > click on Edit HTML. And paste the code just before ]]></b:skin> or save it in a new <style> tag. However, for reasons beyond understanding this method do not works in Internet Explorer 8 or below.

How to Turnoff Right Click on the Images of Blog Posts in Blogger Blogs

All the above effort will go in vain if you do not turn of right click on the images. For this you can add oncontextmenu="return false;" to your image tag like this:

<img oncontextmenu="return false;" src="techinfoknowimage.png"/>

You can also use onmousedown="return false;" for oncontextmenu="return false;". You can turn of right click for the whole web page by adding oncontextmenu="return false;" to the  <body> tag like this:

<body oncontextmenu="return false;">

You can also turn of mouse select of the images by CSS code. If the images cannot be selected then it cannot be saved. The CSS code for this;

img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Add this in your template in a new <style> tag or paste it just before the ]]></b:skin>.

These changes requires editing you template and before making any changes, you must backup you Blogger template.

Great images make a blog post standout. And to serve that need; you make, upload and post great images in your blog posts. However; if you do not protect them you might find them copied and used in other copycat blogs. These tips will help you in that cause for your Blogger blogs.

Even you implement all this, your images in Blogger blogs are still venerable to copy. Along with these basic steps, follow other advance methods such as adding water mark or logo over your images, loading images as backgrounds.