Disable Left Click on Images in Blogger Posts

Post written by
In Blogger, when someone clicks an image (added from blogger image uploader) in blog posts the image are opened in new tab.

 This is the default behaviour of posted images in Blogger, it's specially designed for image lightbox but if the lightbox is disabled images are opened in new tabs, it's because the images you add in post editor are automatically wrapped in an anchor element with a link to the original image which makes the image a link to the its source.

 There's no settings in Blogger Dashboard to turn this function on or off so you have do some extra work to prevent images from opening in new tab if it's clicked. There are two ways to do that.

Editing HTML of each and every post

When you upload a image in your blogger post the image is automatically wrapped inside an anchor tag to the original image file. That's the reason images you post on bloggers are clickable, if you remove the anchor tag, the image becomes unclickable.

Open your blogger post editor, upload an image in a blank post and then switch to the HTML mode (use the buttons on top left). This is what you will see :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH6736zz4fnW1trqk8CxImIR2DQo03dpuOVsLVsB4saABRvEcp7Ud7bcX4roFSSrzN2s2B-QJrBneEbKHWef5CpCZlIW-GNgq1a_zrpJJ-zH_qEMYMoxtnKQbrY4PSv8lPq1PLKcrnhaGh/s1600/301804_419266174773556_195336197166556_1276547_1117941733_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH6736zz4fnW1trqk8CxImIR2DQo03dpuOVsLVsB4saABRvEcp7Ud7bcX4roFSSrzN2s2B-QJrBneEbKHWef5CpCZlIW-GNgq1a_zrpJJ-zH_qEMYMoxtnKQbrY4PSv8lPq1PLKcrnhaGh/s320/301804_419266174773556_195336197166556_1276547_1117941733_n.jpg" width="286" />
</a>
</div>

Deleting those two highlighted lines (2 and 4) will do the job or in the compose mode click on the image and then the Link option on the format toolbar, it will remove the link.

But you have to do this every single time you upload an image which is a difficult and if you have hundreds of posts with thousands of images then this is going to be a boring job for you.    

The JavaScript way

With a small code of JavaScript on your blog, you can disable left click on all the images inside posts on your blog it means you don't have to edit each image to remove it's link. However this JavaScript don't remove the link from the image, it just disables left click on the images.

Adding the jQuery Library first

Note: If jQuery is already added in your template, skip this step.
Before we add the main JavaScript code, let's include the jQuery framework in the template. It's a JavaScript framework. Here's the HTML code for the jQuery framework :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

To add this HTML in your template go to your Blogger Dashboard -> Template -> Edit HTML -> Press CTRL+F (CMD+F on Mac) and search for <head> and paste the JavaScript/HTML immediately below it. It may then look like this
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
.....
........
Once the code is on the right place, click on Save Template and the first step is done. Now move onto the next step for the real action.

The jQuery Function Code

This small jQuery code disables left click on images (or anything else you want) inside the post body. So even if you have your images wrapped inside a clickable anchor link, and even if you click it, nothing will happen.
<script type='text/javascript'>
$(document).ready(function(){
$('.post-body a img:not(.clickEnabled)').click(function(e) {
    if (e.which === 1) {
        e.preventDefault();
    }
});
});
</script>
To make this code work for your blog you have to add this in the template. Follow the instruction to add it :
  1. Go to your Blogger Dashboard
  2. Select the Template tab
  3. Click on Edit HTML and proceed
  4. Now use CTRL+F or CMD+F on Mac
  5. Search for </head> in the template and then paste the jQuery/JavaScript code just above it and Save the template. 
This is what the code should look like on it's correct place
<script type='text/javascript'>
$(document).ready(function(){
$('.post-body a img:not(.clickEnabled)').click(function(e) {
    if (e.which === 1) {
        e.preventDefault();
    }
});
});
</script>
</head>
Note that this will disable left click on all the linked images in post body of your blog, but if you ever want an image to be clickable then just add the clickEnabled class to the img tag. So a click enabled image should look like this (just notice the class name)
<img src='some-image.png' title='An amazing image' class='clickEnabled'/>
This will stop the code from running on this particular image, you can do this on any number of image in your posts.

Not only on blogspot, you can use this snippet of code on any website you want Wordpress, Tumblr etc. just change the selector (the .post-body a img:not(.clickEnabled) thing) but if you aren't sure about it you can contact me to know the correct selector for you site or blog. 

This code simply stops the browser from doing anything when the link images inside post body are clicked, simple, isn't it ? 



If you are facing problems implementing this code into your blog, do let us know in the comments, also remember to include your blog address with the comment. If you have any suggestions, comments are welcomed.