How to Force users to enable JavaScript in Browser | Blogger & WordPress

JavaScript is an important element of a website and without it, some parts of your website may break. That’s why you need to enable a popup message that forces users to enable JavaScript in their browsers. 

But, before that let’s understand briefly about Javascript. 

Javascript is a text-based programming language that helps a website make interactive and add different functionality to it. 

Javascript is mostly used for user inputs and validation in websites. It also helps in performing background tasks to get information to and from the server. 

Why do you need to force Enable Javascript code?

As we discussed earlier, Javascript is widely used to make the webpage more interactive and users can perform certain tasks on the website. 

Without Javascript, most of the functions like analytics tracking, displaying ads to the user won’t work. so that you can’t track the users visiting your website and you can also lose AdSense earnings due to it. 

Some important security functions also don’t work if the javascript is turned off in the browser. 

Suppose you have disabled copy-paste on your website with the help of JavaScript code. so, users can easily bypass this security, just by disabling the JavaScript in the browser. 

so, you can improve the security by using this script and forcing the user to enable JavaScript in the browser. So, users have to enable JavaScript to see the content of your website. 

There are other instances where this code is super helpful. Suppose you have enabled Anti adblock script on your blogger or WordPress website to counter adblocker. 

So, if the user blocks the JavaScript loading, then this code can be bypassed easily. 

That’s why I recommend you force users to enable Javascript in the browser by following this method. 

The best part is that you can use this code in both blogger and wordpress websites. 

How to force Users to enable JavaScript in Blogger

To force users to enable JavaScript on the Blogger website, you need to add the below code in your theme editor. 

Step-1: Go to Blogger dashboard and go to theme section. 

Step-2: Now take a backup of your theme file before moving to the next step. 

Step-3: Now click on Edit HTML and scroll down to the end and find the </body> tag. 

Step-4: Now copy the below code and paste it just above the </body> tag and save the code. 

<noscript>
<style>
body, html{overflow:hidden}
     #JsEnable {display:none}
/* Enable Javascript Popup by key2blogging */
		 #Key2bloggingNoscript {background:rgba(0,0,0,0.85);padding:0;position:fixed;bottom:0;left:0;top:-100px;right:0;z-index:1000;opacity:1;visibility:visible;height:auto;}
		 #Key2bloggingNoscript svg {width:100px; height:100px}
		 #Key2bloggingNoscript svg path {fill:#fff}
		 #Key2bloggingNoscript .isiNoscript{background-color:#34495E;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;font-weight:400;line-height:1.5em;max-width:670px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);border:15px solid rgba(0,0,0,.07); overflow:hidden; transition:all .6s cubic-bezier(.25,.8,.25,1); -webkit-transform:translateZ(0); transform:translateZ(0); backface-visibility:visible; transition:all .2s ease-in-out,visibility 0s; transform-origin:bottom center; pointer-events:auto; transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); opacity:1; animation:key2BloggingWobble .5s; -moz-animation: key2BloggingWobble .5s; -webkit-animation:key2BloggingWobble .5s; -o-animation:key2BloggingWobble .5s}
		 #Key2bloggingNoscript .isiNoscript:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);}
		 #Key2bloggingNoscript .isiNoscript h4, #Key2bloggingNoscript .isiNoscript .JSEnable{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;font-weight:500;margin-bottom:20px}
	</style>
</noscript>

<noscript>
<div id='Key2bloggingNoscript'>
<div class='isiNoscript'><span class='JSEnable'>Enable Javascript</span>
<br/>
<svg viewBox='0 0 24 24'>
<path d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z'/>
</svg>
<br/>Javascript is disabled on your Browser. To use <data:blog.title.escaped/> turn on Javascript in the browser settings.</div>
</div>
</noscript>

Now a display popup is shown to the users who have blocked Javascript in the browser. Without enabling Javascript, the website will not work.

So, in this way you can force users to enable Javascript on the blogger websites.

Here note that the highlighted part (<data:blog.title.escaped/>) is to get the blog title dynamically. You can also replace the code with your Sitename.

You can also change the warning text in this popup and add your own text. 

So, this warning will not show when javascript is enabled in the browsers and only shows to the users that are trying to copy or modify the source code by disabling the Javascript. So, this works as extra protection for your Blogger website. 

Video Guide

How to force Users to enable JavaScript in WordPress

To Force enable javascript in Wordpress, you need to add the code in the header or footer of the website. 

Step-1: Go to the Wordpress dashboard and install a code management plugin like header footer code manager. 

Step-2: Now open the plugin settings and paste the above code in the footer section. 

Step3: Save the code and the javascript code will work properly. 

Here, note that you have to change the <data:blog.title.escaped/> code (highlighted) with your website name while using it on wordpress. 

I hope you got the idea of how to force users to enable javascript in both blogger and wordpress websites. 

In this way, you can protect your anti adblock script and disable copy-paste script which requires javascript to run in the browsers. 

If you have any doubts regarding this, you can ask me in the comment section. Also, don’t forget to subscribe to our YouTube channel for more awesome tutorials. 

Read More: Custom Author box widget in the sidebar.