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.
I have finally found a way for forcing your visitors to enable JavaScript on their browsers. I 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).
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.
[button href='http://thebloggingresearcher.blogspot.com/']Demo: See It Live[/button]
Note:- See the demo after disabling JavaScript.
Features Of This Notification Bar
Professional Look
Security Touch
Responsive Design
With Hover Effects
And more.
How To Add This Featured Notification Bar In Your Blog?
Adding it is very simple and easy. You just have to follow the following steps:
Go to Blogger > Template > Edit HTML
Now, paste the following code below <body> in your template:
<noscript>
<style>
.noti-https:before {
content: "\f023";
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: "\f023";
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 move on customization (if you want any).
Note: We have added text that would tell the user if he has disabled JavaScript and will also tell him a way to enable it using that link. You can go to that link and see that it is explained very nicely that how to enable JavaScript in major browsers like Chrome and Opera.
Customization
You can change pink color words for editing the text on the bar.
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.
Final Words
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 diabled in the viewer's browser and how to force you visitors to enable JavaScript. Now, please share. Thanks!