A lot of viewers on this blog keep asking question via emails about How to Disable Inspect Element on Blog? In this post I have shared a process by which you can restrict Inspect Element on your blog. But for those of you who do not know what is inspect element then let me give you a brief detail about it.

How to Disable Inspect Element on Blog?


What is Inspect Element in Blog?

Inspect element is a very useful feature that is available on desktop version on any browsers. This feature let's the viewers know the site code and even edit and manipulate them from the source. This tool is frequently used by web designers to find out CSS and/or HTML codes on other blog sites that might prove beneficial for them.



If you don't want your theme code on the Inspect Element to be known by others, you can prevent that from happening by installing a script debugger that later your blog will become safer from some codes being directly copied from Inspect Element.

How to Disable Inspect Element on Blog?

Follow the steps carefully to disable Inspect Element on Blog:

1. Open Blogger Dashboard, head over to Themes. Click on Edit HTML button and paste the following code before </body> or &lt;!--</body>--&gt;&lt;/body&gt

<script type='text/javascript'>
//<![CDATA[
// Inspect
!function tundefined){try{!function tundefinedn){1===undefined""+n/n).length&&0!==n||functionundefined){}.constructorundefined"debugger")undefined),tundefined++n)}undefined0)}catchundefinedn){setTimeoutundefinedt,5e3)}}undefined);
//]]>
</script>

2. Click on Save Theme button. You're done.

Check the results by trying to inspect your blog element for yourself.



However this is not 100% efficient method as one may try to deactivate JavaScript and then do their part. I have a method to bypass that too which I've put up just below.

3. Add the following code above </head> or &lt;/head&gt;&lt;!--<head/>--&gt

<noscript>
<style type='text/css'>
/* No Script */
body,html{overflow:hidden}
.noscript{background:#e74c3c;color:#fff;padding:8% 0 0 0;position:fixed;bottom:0;left:0;top:0;right:0;z-index:1000;height:auto;-webkit-transform:translateZundefined0);transform:translateZundefined0);overflow:hidden}
.noscript p{margin:0;text-align:center;padding:0 20px 10px 20px;margin:auto;font-size:3rem;line-height:1.5;font-family:monospace;max-width:1010px;text-transform:uppercase;font-weight:700}
.noscript p span{color:#ffe88b;font-size:10rem;line-height:normal;font-weight:normal}
</style>
</noscript>

4. Add the following code right below <body>

<noscript>
<div class='noscript'>
  <p><span>&#9888;</span></p>
  <p>Please Enable Javascript to view our site content</p>
  <p>Thank you</p>
</div>
</noscript>

5. To add final layer of protection, disable right click on website using the following code right above </body> or &lt;!--</body>--&gt;&lt;/body&gt:

<script type='text/javascript'>
//<![CDATA[
// Anti Right Click
var message="Function Disabled!";function clickIE4undefined){ifundefined2==event.button)return alertundefinedmessage),!1}function clickNS4undefinede){ifundefinedundefineddocument.layers||document.getElementById&&!document.all)&&undefined2==e.which||3==e.which))return alertundefinedmessage),!1}document.layers?undefineddocument.captureEventsundefinedEvent.MOUSEDOWN),document.onmousedown=clickNS4):document.all&&!document.getElementById&&undefineddocument.onmousedown=clickIE4),document.oncontextmenu=new Functionundefined"alertundefinedmessage);return false");
//]]>
</script>

I hope this post solved the problem that you had about disabling Inspect Element on Blog, Plus I have also added the Anti-JavaScipt disabler and Anti-Right Click for extra layer of protection. Show your Love in comments below. See you around.