Force Readers to Enable JavaScript in Browsers

In previous post we have share with you How To Redirect Blogger Blog from HTTP to HTTPS with 301 Redirection? But there was a disadvantage of that tutorial – Your blog will not get redirected from HTTP to HTTPS if the visitor have disabled JavaScript in the browser. Now, what you can do is- Show notification to the user, forcing him/her to enable JavaScript. We will do this in our this tutorial. So we have added this to in series of previous post.

How To Force Readers to Enable JavaScript in Browsers?

Force Your Readers to Enable JavaScript of Their Browsers?

Many of the peoples always keep “JavaScript” disabled to save their Data (MB) and time if they have a slow connection. So, to force your blog’s visitors to enable JavaScript today we’re here to help you. We have finally found a way for forcing your visitors to enable JavaScript on their browsers. As we have discussed above, We have included this post in our series that is about HTTPS of the blogger because it will solve your problem of sending users from HTTP to HTTPS if the user has JavaScript disabled in its web browser (because we are forcing him to enable JavaScript and if you have added this JavaScript in your browser, then it will work when viewer will enable JavaScript).

Series Posts >>>

Today, we will do a minor change in your blog that will help you in a significant amount. We will display a beautiful sticky bar when JavaScript is disabled in your blog’s visitor’s browser. You can display any message on this notification bar, for example, the text, forcing them to enable JavaScript. Below we have discussed some features of this Notification bar before starting the tutorial.

Awesome Features Of This Noti-Bar

  1. Responsive and Cool Design.
  2. Pro Look.
  3. With Hover Effect.
  4. Security Touch.
  5. Force Readers to Enable JavaScript.

How To Add This Notification Bar to Blogger Blog?

  • Go To Blogger >> Templates >> Edit HTML.
  • Now Search for <body> tag by pressing CTRL+F and paste the following code just below of this tag.

.noti-https:before {           content: &quot;f023&quot;;           font-family: FontAwesome;           background: #00A50D;           padding: 22px;           position: relative;           left: -22px;           font-size: 22px;         }         .noti-https a:hover:before {           color: #FFF;         }         .noti-https a:before {           content: &quot;f023&quot;;           font-family: FontAwesome;           color: #00A50D;           margin-right: 8px;         }         .noti-https a:hover {           background: #00A50D;           color: #FFF;           box-shadow: 0 0 0;         }         .noti-https a {           background: #3D3D3D;           padding: 9px;           font-size: 14px;           transition: .3s;           color: #FFF;           text-shadow: 0 0 0;           font-family: sans-serif;           text-decoration: none;           text-transform: capitalize;           position: relative;           top: 0px;         }         .noti-https {           background: #444;           overflow: hidden;           color: #FFF;           font-family: sans-serif;           text-shadow: 1px 1px 2px #000;           padding: 21px;           box-shadow: 0 0 7px 1px #828282, inset 0px 0px 27px -7px #000;           z-index: 999999;           position: fixed;           width: 100%;           padding-top: 15px;           font-size: 14px;         }         span.reco-bg {           margin-left: 16px;         }         .reco-bg:nth-child(2) {           margin-left: 6px!important;         }         @media only screen and (max-width: 1122px) {           .noti-https {             line-height: 34px;           }           .noti-https:before{content: none!important}           .noti-https {             padding-right: 29px!important;             width: 94%!important;           }         }   
<div class=”noti-https”>         We aren’t sure that you’re enjoying us securely. To read content security and properly, please enable JavaScript          <a class=”btn-bg” href=””>           Here’s HOW!         </a>         <span class=”reco-bg”>           (HIGHLY RECOMMENDED)         </span>

  • Now Save your Template and below is some customization tips. Follow them if you want do some customization in this sticky bar.


  1. You can change pink color words for editing the text on the bar.
  2. You can change blue color words to change URL you want on the bar.

Did you know? You can add anything you want on your blog when JavaScript is disabled on the user’s browser if you include the whole thing’s code inside yellow highlighted code.


So above guide is about  How To Force  Readers to Enable JavaScript in Browsers? Now, I think you have enjoyed this post. This is one and only one post that properly illustrates you how to show anythings (except JavaScript) when JavaScript is disabled in the viewer’s browser and how to force your visitors to enable JavaScript. Now its your turn to give us feedback by dropping comments below in this post you can also share this post on social networking sites. Thanks!
Paramjot Singh

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 0 comments

Leave a Reply: