Skyrocket Your Blog Traffic!
Join our newsletter to get guides which will help you boost your blog traffic for free!


BlogAntiAdblock : The Best Free Anti Adblock Widget!

Nitishk Gupta 12/05/2017 No Comment
BlogAntiAdblock - Best Anti Adblocker

Are you losing a serious amount of money just because of your users using ad blockers? Is your AdSense earning getting low because of ad blockers? If yes, we've made a great and free plugin/widget which will help you block those visitors using adblockers and force them to disable it, which will ultimately help you double or even triple your earnings! So, what are you waiting for? Let's install BlogAntiAdblock on your blog -


What Are Ad Blockers?

Adblocker

We all love money, don't we? 😍 

When it comes to blogging, advertisements are one of the great sources to earn money from a blog. We use AdSense, Media, and many other an networks to make some cash out from our blog.

...but

Unfortunately, most of our visitors use adblockers and they seriously lower down our earnings. 

But, why?

Cause they don't know how we(publishers/bloggers) work hard and use ads as a source to earn money. They just care about their bandwidth. 

One way to stop this is by using anti-Adblock scripts or plugins/widgets.

If you're running a blog which earns most of the money through advertisements, then you seriously need anti adblock widget. 

..and I'm not kidding 😁

What Is BlogAntiAdblock

Though there are many anti-Adblock plugins/scripts available, we built our own...

...but, why?

Because they all lacked something

Some were very heavy, some being non-responsive to much more

So, we built our own anti-Adblock plugin/script/widget named "BlogAntiAdblock" 

... I know it's tough to remember it for the first time 😉

BlogAntiAdblock is light, responsive, JQuery free, stylish, and fully customizable.

..and, guess what?

It's free

Yup, I am not joking :p

Features Of BlogAntiAdblock

Here are some features of this widget - 
  • Light
  • Built On Vanilla JS
  • Fully Responsive
  • Customizable
  • Great Design
  • Time Delay
  • Free
  • Updates Ready
  • Works On Almost Any Adblocker
  • High Accuracy
  • Analytics Tracking ready
  • Much More...
all this for free and you're still thinking?

...common

Now the question comes, where can I install it and how?

So, BlogAntiAdblock can be installed on any platform(Blogger, WordPress, Joomla, etc.) as it is built on vanilla JS and HTML.

Don't worry, I'll tell you how you can install it in Blogger as well as in WordPress.

Installing BlogAntiAdblock In Blogger

Here is how you can install this beautiful widget on your blogger blog -

1- Open your Blogger dashboard

2- Go to Theme >> Edit HTML

3- Press Ctrl+f to find </body> and paste the below code with customizations above the tag -

<!--BlogAntiAdblock--> <style type="text/css">
@media only screen and (max-width: 1100px) { .blogantiadblockbox {position: fixed!important;} .blogantiadblocktext {max-width: 95%!important} .blogantiadblockrefresh {width: 70%!important;} .blogantiadblockimage {display: none!important;} .blogantiadblockhead {font-size: 25px!important;} .blogantiadblocktext {font-size: 20px!important;} .blogantiadblockfooter {font-size: 20px!important;} .blogantiadblockrefresh {font-size: 25px!important;} } @media only screen and (max-height: 530px) { .blogantiadblockbox {position: fixed!important;} .blogantiadblocktext {max-width: 95%!important} .blogantiadblockrefresh {width: 70%!important;} .blogantiadblockimage {display: none!important;} .blogantiadblockhead {font-size: 25px!important;} .blogantiadblocktext {font-size: 20px!important;} .blogantiadblockfooter {font-size: 20px!important;} .blogantiadblockrefresh {font-size: 25px!important;} } .blogantiadblockbox {display: none;position: fixed;top: 0;left: 0;background: #F00000;background: -webkit-linear-gradient(to right, #DC281E, #F00000);background: linear-gradient(to right, #DC281E, #F00000);width: 100%;height: 100%;z-index: 99999999999999999999999;text-align: center;color: #fff;font-family: Indie Flower;} .blogantiadblockbox .blogantiadblockimage {max-width: 180px;height: auto;margin-top: 25px;margin-right: -4%;} .blogantiadblockbox .blogantiadblockclose {color: #fff;text-decoration: none;float: right;border-bottom-left-radius: 8px; padding-bottom: 3px!important; padding: 10px;background: rgba(0,0,0,0.4);} .blogantiadblockbox .blogantiadblockclose img {width: 17px;height: auto;transition: .3s;} .blogantiadblockbox .blogantiadblockclose:hover img {transform: rotate(90deg);-webkit-transform: rotate(90deg);} .blogantiadblockbox .blogantiadblockhead {font-size: 48px;margin-top: 15px;} .blogantiadblockbox .blogantiadblocktext {font-size: 30px;margin-top: 10px;} .blogantiadblockbox .blogantiadblockrefresh {width: 50%;padding: 10px;background: rgba(0,0,0,0.4);border-radius: 8px;font-size: 30px;margin-top: 35px;cursor: pointer;transition: .3s;} .blogantiadblockbox .blogantiadblockrefresh:hover {background: rgba(0,0,0,0.7);} .blogantiadblockbox .blogantiadblockfooter {position: fixed;bottom: 0;background: rgba(0,0,0,0.4);padding-top: 5px;padding-bottom: 5px;width: 100%;font-size: 25px;} .blogantiadblockbox .blogantiadblockfooter a {text-decoration: none;color: #fff;}
</style>
<div class="blogantiadblockbox" id="blogantiadblockbox">
<a href="#!" class="blogantiadblockclose" id="blogantiadblockclose" onclick="blogantiadblockclosefn();" title="Close"><img src="https://s8.postimg.org/jblmqtz11/close.png"></img></a>
<center><div class='blogantiadblockcontents'>
<center><img src="https://s8.postimg.org/ozrxhpg85/adblock.png" class="blogantiadblockimage"></img></center>
<div class="blogantiadblockhead">ADBLOCKER DETECTED</div>
<center><div class="blogantiadblocktext">It looks like you're using an ad blocker. That's okay.  Who doesn't?<br></br>But without advertising-income, we can't keep making this site awesome.<br></br>Please disable your ad blocker and then reload the page to continue enjoying our site.</div></center>
<center><div class="blogantiadblockrefresh" onclick="location.reload();">Reload Page</div></center>
<div class="blogantiadblockfooter">Powered By - <a href="http://www.thebloggingarena.com/2017/12/blogantiadblock.html
" target="_blank" title="BlogAntiAdblock : The Best Anti Adblock Widget!">BlogAntiAdblock</a></div>
    </div></center>
<script type="text/javascript">
var blogantiadblockclose = false; //
    var blogantiadblockdelay = 1000; // BlogAntiAdblock Delay (1 sec = 1000)
function blogantiadblock() {
// Callback If Adblocker Is Enabled
setTimeout(function(){
document.getElementById("blogantiadblockbox").style.display = "block";
if (blogantiadblockclose != true) {
document.getElementById("blogantiadblockclose").style.display = "none";
}
}, blogantiadblockdelay);
}
function blogantiadblockclosefn() {
// Callback For Close Button Click
document.getElementById("blogantiadblockbox").style.display = "none";
}
function blogantiadblocksuccess() {
// Callback If Adblocker Is Disabled
}
</script>
<script defer type="text/javascript" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="blogantiadblock();" onload="blogantiadblocksuccess();"></script>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"></link>
</div>
<!--Ends-->

Customizations -
  • Replace https://s8.postimg.org/ozrxhpg85/adblock.png with your adblock image URL (optional)
  • Replace ADBLOCKER DETECTED with the title of the anti-adblock popup.
  • Replace the blue with the text you want in the popup.
  • If you want to enable the close button on popup change false to true
  • To change the delay of popup, simple change value of 1000 to any value. Ex - 0s : 0, 2s : 2000
  • If you've already installed Indie Flower Google font on your blog/site, remove the pink line.
4- Finally click on Save theme button.

That's it!

Installing BlogAntiAdblock In WordPress

These are the steps to install this widget on WordPress blog. We are working on a plugin which will be released after few weeks until then use these steps -

1- Go to WP dashboard

2- Go to Appearance >> Editor

3- Click on footer.php

4- Paste the below code with customizations above </body> tag after searching -
<!--BlogAntiAdblock--> <style type="text/css">
@media only screen and (max-width: 1100px) { .blogantiadblockbox {position: fixed!important;} .blogantiadblocktext {max-width: 95%!important} .blogantiadblockrefresh {width: 70%!important;} .blogantiadblockimage {display: none!important;} .blogantiadblockhead {font-size: 25px!important;} .blogantiadblocktext {font-size: 20px!important;} .blogantiadblockfooter {font-size: 20px!important;} .blogantiadblockrefresh {font-size: 25px!important;} } @media only screen and (max-height: 530px) { .blogantiadblockbox {position: fixed!important;} .blogantiadblocktext {max-width: 95%!important} .blogantiadblockrefresh {width: 70%!important;} .blogantiadblockimage {display: none!important;} .blogantiadblockhead {font-size: 25px!important;} .blogantiadblocktext {font-size: 20px!important;} .blogantiadblockfooter {font-size: 20px!important;} .blogantiadblockrefresh {font-size: 25px!important;} } .blogantiadblockbox {display: none;position: fixed;top: 0;left: 0;background: #F00000;background: -webkit-linear-gradient(to right, #DC281E, #F00000);background: linear-gradient(to right, #DC281E, #F00000);width: 100%;height: 100%;z-index: 99999999999999999999999;text-align: center;color: #fff;font-family: Indie Flower;} .blogantiadblockbox .blogantiadblockimage {max-width: 180px;height: auto;margin-top: 25px;margin-right: -4%;} .blogantiadblockbox .blogantiadblockclose {color: #fff;text-decoration: none;float: right;border-bottom-left-radius: 8px; padding-bottom: 3px!important; padding: 10px;background: rgba(0,0,0,0.4);} .blogantiadblockbox .blogantiadblockclose img {width: 17px;height: auto;transition: .3s;} .blogantiadblockbox .blogantiadblockclose:hover img {transform: rotate(90deg);-webkit-transform: rotate(90deg);} .blogantiadblockbox .blogantiadblockhead {font-size: 48px;margin-top: 15px;} .blogantiadblockbox .blogantiadblocktext {font-size: 30px;margin-top: 10px;} .blogantiadblockbox .blogantiadblockrefresh {width: 50%;padding: 10px;background: rgba(0,0,0,0.4);border-radius: 8px;font-size: 30px;margin-top: 35px;cursor: pointer;transition: .3s;} .blogantiadblockbox .blogantiadblockrefresh:hover {background: rgba(0,0,0,0.7);} .blogantiadblockbox .blogantiadblockfooter {position: fixed;bottom: 0;background: rgba(0,0,0,0.4);padding-top: 5px;padding-bottom: 5px;width: 100%;font-size: 25px;} .blogantiadblockbox .blogantiadblockfooter a {text-decoration: none;color: #fff;}
</style>
<div class="blogantiadblockbox" id="blogantiadblockbox">
<a href="#!" class="blogantiadblockclose" id="blogantiadblockclose" onclick="blogantiadblockclosefn();" title="Close"><img src="https://s8.postimg.org/jblmqtz11/close.png"></img></a>
<center><div class='blogantiadblockcontents'>
<center><img src="https://s8.postimg.org/ozrxhpg85/adblock.png" class="blogantiadblockimage"></img></center>
<div class="blogantiadblockhead">ADBLOCKER DETECTED</div>
<center><div class="blogantiadblocktext">It looks like you're using an ad blocker. That's okay.  Who doesn't?<br>But without advertising-income, we can't keep making this site awesome.<br>Please disable your ad blocker and then reload the page to continue enjoying our site.</div></center>
<center><div class="blogantiadblockrefresh" onclick="location.reload();">Reload Page</div></center>
<div class="blogantiadblockfooter">Powered By - <a href="http://www.thebloggingarena.com/2017/12/blogantiadblock.html
" target="_blank" title="BlogAntiAdblock : The Best Anti Adblock Widget!">BlogAntiAdblock</a></div>
    </div></center>
<script type="text/javascript">
var blogantiadblockclose = false; //
    var blogantiadblockdelay = 1000; // BlogAntiAdblock Delay (1 sec = 1000)
function blogantiadblock() {
// Callback If Adblocker Is Enabled
setTimeout(function(){
document.getElementById("blogantiadblockbox").style.display = "block";
if (blogantiadblockclose != true) {
document.getElementById("blogantiadblockclose").style.display = "none";
}
}, blogantiadblockdelay);
}
function blogantiadblockclosefn() {
// Callback For Close Button Click
document.getElementById("blogantiadblockbox").style.display = "none";
}
function blogantiadblocksuccess() {
// Callback If Adblocker Is Disabled
}
</script>
<script defer type="text/javascript" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="blogantiadblock();" onload="blogantiadblocksuccess();"></script>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"></link>
</div>
<!--Ends-->

Customizations -
  • Replace https://s8.postimg.org/ozrxhpg85/adblock.png with your adblock image URL (optional)
  • Replace ADBLOCKER DETECTED with the title of the anti-adblock popup.
  • Replace the blue with the text you want in the popup.
  • If you want to enable the close button on popup change false to true
  • To change the delay of popup, simple change value of 1000 to any value. Ex - 0s : 0, 2s : 2000
  • If you've already installed Indie Flower Google font on your blog/site, remove the pink line.
5- Click on Update File

Done!

Installing BlogAntiAdblock On Any Other Platform


1- Get access to the HTML/Template file

2- Find </body> and paste the above code after customizations.

3- Save the file.

Done!

NOTE - If you want to track how many of your visitors are using ad-blocker then simply add this code below the "// Callback If Adblocker is Enabled" line - 
ga('send', 'event', 'Ad-Blocker', 'click','Ad-Blocker');

Credits And License



Version: 1.0

License: This widget/script/plugin By The Blogging Arena Is Licensed Under Creative Commons Attribution-Non Commercial-ShareAlike 4.0 International License.
You are most welcomed to share the plugin with your audience as long as you attach credit links back to this webpage. Kindly avoid selling the plugin for a commercial product or service. Its use is restricted to individuals alone.
Removal Of credit link form the widget is not allowed, and strict actions may be taken if found abusing the license.

Features Coming In Next Update

We are planning to add following features in the next update -
  • Theme Options (ex- orange, green, red, etc.)
  • Social Sharing  
  • Different Popup Types
  • Advanced Triggering
  • Design Improvements
  • Separate WordPress Plugin
  • Much More...

Final Words

So, this was a post about the best free anti-Adblock widget named "BlogAntiAdblock." Hope you liked the widget and using it will increase your revenue.

We're continuously working hard to make this widget better. Therefore, new updates will be available in future.

We suggest you subscribe us in-order to get notifications regarding updates to this widget.

Do share this widget with your friends!

Good Luck & Happy Blogging 😉


Join Our Newsletter!

Join our newsletter to get regular updates with secret tips/tricks to skyrocket your blog rankings!

Nitishk Gupta
Hi, I Am Nitishk Gupta, a blogger and web developer. I am an addicted blogger who wants to share each and everything I have learned so far in my 4 years journey. Feel free to send me friend request or follow me. Thanks!

No comments:

Post a Comment

Powered by Blogger.