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 :
1 | <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 this1 2 3 4 | <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.
1 2 3 4 5 6 7 8 9 | <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 :
- Go to your Blogger Dashboard
- Select the Template tab
- Click on Edit HTML and proceed
- Now use CTRL+F or CMD+F on Mac
- Search for
</head>in the template and then paste the jQuery/JavaScript code just above it and Save the template.
1 2 3 4 5 6 7 8 9 10 | <script type='text/javascript'>$(document).ready(function(){$('.post-body a img:not(.clickEnabled)').click(function(e) { if (e.which === 1) { e.preventDefault(); }});});</script></head> |
clickEnabled class to the img tag. So a click enabled image should look like this (just notice the class name)1 | <img src='some-image.png' title='An amazing image' class='clickEnabled'/> |
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 ?
