Friday, 6 March 2015

Adblock Detection Plugin for Blogger and Wordpress

This post is about how you can simply install an adblock detector widget in blogger & wordpress. Most of the blogger actually blog for money. In a survey it has came out that, now days almost 12% of all internet users are using Ad Bloker to prevent them from Pop Up, Text and Banner ad. This is no good for both part time & professional bloggers.
adblock detector for blogger and wordpress

About Adblock Detector:

There is an old saying “Necessity is the mother of our invention”. Whenever there is a problem for sure there is a solution too. AdBlock detection plugin is the solution for adblock browser add-ons/extension. Adblock detector is a simple script of code that will request users to turn off their adblocker. Until they turn it off your blog page will be hidden.

.::ADBLOCK DETECTOR LIVE DEMO::.
Live Demo


How To Install Adblock Detector in Blogger:

With BlogspotYard installing adblock detector for your blogger blog is really so much easy. No need to install CSS & Script separately. Smile Just one piece of code is enough for entire work. So follow the simple steps below and enjoy.

Step 1: Login to your blogger account, select Template from blogger main menu then click on Edit HTML.
            Remember: Always keep a backup of your blogger template before proceed to editing.

Step 2: Search for <body> tag in template editor.

Step 3: After finding the <body> tag immediately copy and paste the below code just After/Below/Under it.
    <style>
    /*Copyright @BlogspotYard*/
    @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
    #cc-blockad {display:none;width:100%;height:100%;position:fixed;z-index:999999; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgizN4GXzideY0xhHoQR8y4V7Nr37sb2dyQ0BQzYYUckfE8ntrC9mKj5LqWKFVSQRE1hAhTFCHi5GY0hZsKFe0kDybRaInrBJYPqHACsvAry72dDB0_soj754LgJ-K0_5nHpNdjcHO5ZVq3/s1600/opacity.png');}
    .blockad-inner {text-align:justify;font-family: 'Open Sans Condensed', sans-serif;width:550px;height:auto;background:#fafafa;margin:auto;margin-top:130px;font-size:22px;color:#555;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;border:2px solid #999;border-bottom:5px solid #999;}
    .blockad-inner h3 {font-size:24px;margin:20px;}
    .blockad-inner img {position:relative;top:4px;right:10px;}
    #adblock-get {text-align:right;height:20px;font-size:8px;color:#777;font-family:Verdana, Geneva, sans-serif;}
    #adblock-get a{color:#777;text-decoration:none;margin-right:20px;line-height:20px;}
    #adblock-get a:hover{text-decoration:underline;}
    .h2-header {border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ccc));background:-moz-linear-gradient(top, #ffffff 5%, #ccc 100%);background:-webkit-linear-gradient(top, #ffffff 5%, #ccc 100%);background:-o-linear-gradient(top, #ffffff 5%, #ccc 100%);background:-ms-linear-gradient(top, #ffffff 5%, #ccc 100%);background:linear-gradient(to bottom, #ffffff 5%, #ccc 100%);border-bottom:1px solid #999;}
    .h2-header h2{color:#333;margin:0;padding:10px;text-transform:uppercase;font-size:30px;}
    </style>
    <!--Adblock detector for blogger by blogspotyard.com-->
    <div id='cc-blockad'>
    <div class='blockad-inner'>
    <div class='h2-header'>
    <center><h2><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtu6BZbeGWZy5I_nT82i5AO926jed8KvaNt9GgDY6yqyfM5Jp_SBKyuwz1-e4Q50pf8N4P-qGfllv6XiU54sTcX3lvjt_L9q5NqBR_42gNMN6S7WZsJr0YDlIelf27OY3yL_6z6j_SzsJw/s1600/Alert-Icon-.png'/>Adblock is enabled</h2></center>
    </div>
    <div style='margin:20px;'>
    We have detected that you are using adblock on your web browser. Please disable adblock or simply disable your ad blocker only on 'BlogspotYard.Com' and reload this page to hide this.<br/>
    Thanks.
    </div>
    <center><h3>No popup. We promise!</h3></center>
    <!--Don't mess with this-->
    <div id='adblock-get'>
    <a href='http://www.blogspotyard.com/2015/03/adblock-detector-for-blogger-and-wordpress.html' rel='dofollow' target='_blank'>Install This Detector</a>
    </div>
    </div><!--2-->
    </div><!--1-->
    <script type='text/javascript'>
    var adblock = true;
    </script>
    <script src='http://codingcrazy.com/demo/adframe.js' type='text/javascript'/>
    <script type='text/javascript'>
    if(adblock) {
    document.getElementById('cc-blockad').style.display='block';
    }
    </script>
    <!--All ends here-->
Step 4: Finally hit the Save Template Button. You are done and successfully installed adblock detector widget for your blogger blog.


Little Customization:

We have detected that you are using adblock on your web browser. Please disable adblock or simply disable your ad blocker only on 'BlogspotYard.Com' and reload this page to hide this.
  • From above piece of code just replace the red marked text (BlogspotYard.Com) with your own site name.

Will This Plug-In Work for Another Platform:

I have mentioned blogger for this plug-in to use. But this doesn't mean its will not work for another platform/CMS like Wordpress.
This will also work for any other blogging and CMS platform. To use this plug-in on another platform paste the above code just under open 'body' tag.


Upcoming Search Tags:

adblock detection blogger, adblock detection wordpress, detect adblock javascript, detect adblock php, detect adblock plus, adblock detection script, adblock detection bypass, disable adblock detection, how to disable adblock in blogger, adblock detector for blogger, how to disable adblock for blogger, detect ad block, adblock detection jquery, adblock detector widget for blogger, adblock vs adblock plus, adblock chrome incognito, adblock firefox ubuntu, adblock firefox not working, adblock plus detector

Posted by at
Labels: , , ,

1 comment:

Subscribe to: Post Comments (Atom)