Disable Right Click Context Menu On Your Blog Images

The most popular way bloggers use in protecting their site content is by disabling right click on the whole blog content, but this action makes some loyal readers to feel depress with limited functions associated to the right click such as open link in new window, bookmark this link, reload and back. But you can still protect your blog images by disabling right click on only images and not the whole blog, which still makes sense.
This effect can be apply to a single image or the whole images on your blog, using a few line of code. both the two hacks will be shared in this tutorial, and for a demo of this hack, simply click on the image below, and see what we are talking about. Cool right?

How To Disable Right Click ON Single Image

In other to disable right click on a single image, you will need to add a context menu event handler code into the image tag. The following code is the code you need to insert into your image tag.

oncontextmenu='alert("Image protected");return false;'

Now in your post editor, simply switch to HTML mode when your are about to disable an image. The image tag will look as follow:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJnDmZnwWxV46d2BL0fAKQUorZHMupbH0K6n6alHNI3678eI5oHyC4KqqG3irAAy-ZYtsHEcil5Bil8VXkIxTqr1n3BlkGDKkwnTGoorMaPdOn4I7nlo2JOV4lfyAQaCgnlpSP3LECjPee/s200/disable+right+click+on+image..png"  />

Adding the context menu snippet into to the image tag, the final result will look as follow:

<img oncontextmenu='alert("Image protected");return false;' border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJnDmZnwWxV46d2BL0fAKQUorZHMupbH0K6n6alHNI3678eI5oHyC4KqqG3irAAy-ZYtsHEcil5Bil8VXkIxTqr1n3BlkGDKkwnTGoorMaPdOn4I7nlo2JOV4lfyAQaCgnlpSP3LECjPee/s200/disable+right+click+on+image..png"  />

You can change Image protected to your preferred text as it is the alert text that will appear when a reader click on the protected image.

How To Disable Right Click On All Images

• Go to Template > Edit HTML > Proceed
• Use ctrl F to find </head> and paste the following code after/below </head>

<script type="text/javascript">
//<![CDATA[
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Disable context menu on images by www.realcombiz.com
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    function nocontext(e) {
        var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
        if (clickedTag == "IMG") {
            alert(alertMsg);
            return false;
        }
    }
    var alertMsg = "Image context menu is disabled";
    document.oncontextmenu = nocontext;
//]]>
</script>

The code above will disable context menu on all your blog images and replace it with an alert box.

Hope you love this new hack?
Suggestion/comments are highly welcome, as we love to hear from you and feel free to share it with friends and followers using the share buttons.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz