Adblock detector for WordPress / Blogger

Adblock detector for WordPress / Blogger

Adblock detector for WordPress / Blogger

Previously I have shared the Adblock detector blogger widget which detects ad blocker extensions in Chrome browser or any other browsers.

This is another beautiful Adblock detector. You can use this Adblock detector on your blogger sites as well as on your WordPress site. You can also use the previously shared Adblock detector on your WordPress site.

This ad block detector widget allows your site or adds up functionality to your website to detect Adblock extensions in different browsers.

If you want to know the advantages and disadvantages of using an Adblock detector in your WordPress or blogger site you can read this article for that.

I hope that you will be familiar with the advantages and disadvantages of ad block detectors now let me share with you the source code of this Adblock detector and the steps to add this to your WordPress blogger site.

Follow these steps to install this widget:

For Blogger:

  1. Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Click Edit HTML
  4. Now Search for </body>
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Now copy the code provided below and paste it above the </body> tag.
  7. <style>
    .ykth-inner{font-family:"Open Sans","Roboto",Segoe UI,sans-serif;background:#FFF;position:fixed;width:40%;left:0;right:0;top:30%;margin:auto}
    .ykth-head>svg{float:left;margin:0 9px 0 0;animation:shake .82s cubic-bezier(.36,.07,.19,.97) 7;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}
    .ykth-head>p{margin:0 0 0 35px;font-size:14px}
    .ykth-body>p{margin:0 0 10px}
    @keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}
    <div id="ykth"><div class="ykth-inner">
    <div class='ykth-head'>
    <svg style="width:30px;height:30px" viewBox="0 0 26 26"><path fill="#FFFFFF" d="M13,13H11V7H13M12,17.3A1.3,1.3 0 0,1 10.7,16A1.3,1.3 0 0,1 12,14.7A1.3,1.3 0 0,1 13.3,16A1.3,1.3 0 0,1 12,17.3M15.73,3H8.27L3,8.27V15.73L8.27,21H15.73L21,15.73V8.27L15.73,3Z"/></svg>
    <b>Adblock Detect</b>
    <p>We have detected that you are using adblock in your browser</p>
    <i class="close" onclick="document.getElementById(ykrd1).style.display='none'">×</i>
    <div class='ykth-body'>
    <p>Our website is made possible by displaying online advertisements to our visitors.</p>
    <p>Please consider supporting us by disabling your ad blocker.</p>
    <!-- Start Condition When JS Disable -->
    <div class="ykth-body">
     <p>Javascript is disabled in your web browser.</p>
     <p>For full functionality of this site it is necessary to enable JavaScript. Here are the <a href="" target="_blank"> instructions how to enable JavaScript in your web browser</a>.</p>
    <style>#ykth{display:block;}.ykth-inner>.ykth-body{display:none;}.ykth-head>b,.ykth-head>p{font-size:0}.ykth-head>b:before{content:"Javascript Detected";font-size:16px}.ykth-head>p:before{content:"We have detected that you are disable javascript in your browser";font-size:14px}</style>
    <!-- End Condition When JS Disable -->
    var ykrd1=Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
    var ykrd2=Math.random().toString(36).substring(2, 7);
    var e=document.getElementById("ykth");e.setAttribute("id", ykrd1);e.classList.add("ykwrp_"+ykrd2);
      document.addEventListener('DOMContentLoaded', init, false);
    function init(){
        } else {
    function adsBlocked(callback){
      var testURL = ''
      var myInit = {
        method: 'HEAD',
        mode: 'no-cors'
      var myRequest = new Request(testURL, myInit);
      fetch(myRequest).then(function(response) {
        return response;
      }).then(function(response) {
  8. Save Theme/Template

For WordPress:

Copy the code provided above and go to your WordPress template editor and paste this code into your footer.php file.

I'm really sorry i am a blogger user that's i can not provide detailed guide on how to install this in wordpress. I hope you will understand.

After following all the steps provided above this widget will be added to your website perfectly and it will work fine.

In the above source code, you can customise the headings and add the description message If you want to change it.

If you are wondering about the demo of this Adblock detector then click the demo button below to see the real-time preview or demo of this Adblock detector.

View Demo

You can also see the demo on your website after installing the source code for adding the source code into your website's source code.


That's pretty much in today's article I hope that you have successfully installed a block detector in your WordPress or blogger site and it will help you to increase your revenue in your AdSense account.

If you have any queries please leave your comments in the comments section I am here to help you.


Help us improve this article by leaving your feedback below.
  1. F@HDI
    [email protected] 23 May 2020, 10:55:00

    kia is se website ki speed par assar hoga ya nahi

    Reply Delete
Add Comment
Previous Post Next Post