Dec 26, 2015

Force Readers to Enable JavaScript in Browsers

data:blog.title
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.
<noscript>
<style>
.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;           }         }   
</style>
<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="http://enable-javascript.com/">           Here's HOW!         </a>         <span class="reco-bg">           (HIGHLY RECOMMENDED)         </span>
</div> 
</noscript>
  • Now Save your Template and below is some customization tips. Follow them if you want do some customization in this sticky bar.

Customizations:

  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.

Conclusion:

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!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.