Smart Educati

Home

Enhance Your Website with an Effective Anti Ad Blocker: A Step-by-Step Guide

Greetings and welcome to Smart Educati Blog!

As it's commonly understood, the majority of popular browsers now come equipped with an AdBlocker feature, widely utilized by users today.





This article will guide you through the process of integrating an Anti AdBlocker onto any Blogger website.


What makes it so effective?

It can identify nearly every built-in browser ad blocker, including those found in Brave Browser's Shields, ad-blocking extensions, ad-blocking DNS, and more.

What steps are involved in integrating the Anti AdBlocker?

Integrating the Anti AdBlocker into your Blogger website won't demand extensive knowledge of HTML, CSS, or JS, as it's already pre-designed for you. Your task mainly involves implementing the provided codes in the appropriate sections of your Blogger Theme XML.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: Access the Theme section from your Blogger Dashboard.

Step 3: Click the arrow down ðŸ”½ icon next to 'customize' button.

Step 4: Click Edit HTML, and you'll be directed to the editing page.

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.


/* Pop-Up Box (Style 1) */

.popSc{position:fixed;z-index:99981;top:0;bottom:0;left:0;right:0;padding:20px;background:#f3f5fe;display:flex;justify-content:center;align-items:center}

.popSc.hidden{display:none}

.popSc .popBo{position:relative;background:#fff;max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:30px}

.popSc .popBo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}

.popSc .popBo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}

.popSc .popBo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}

.popSc .popBo .popBtn{display:inline-flex;justify-content:center;align-items:center;height:50px;width:50px;outline:none;border:none;background:#f3f5fe;border-radius:50%;margin-top:20px;transition:all .2s ease;-webkit-transition:all .2s ease}

.popSc .popBo .popBtn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}

.popSc .popBo .popBtn svg{width:24px;height:24px;flex-shrink:0;opacity:.8}

.popSc .popBo .popBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}

.darkMode .popSc, .darkMode .popSc .popBo .popBtn{background:#1f1f1f}

.darkMode .popSc .popBo{background:#2c2d31}

.darkMode .popSc .popBo svg{stroke:#fefefe}

.darkMode .popSc .popBo p, .darkMode .popSc .popBo  h2{color:#fefefe}

@keyframes rotateIcn{from{transform:rotate(0deg)} to{transform:rotate(359deg)}}

@-webkit-keyframes rotateIcn{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(359deg)}}
Step 6: Now add the following Javascript just above to head tag. If you don't find it, it is probably already parsed which is </head>.

/*<![CDATA[*/

/**

 

 

(function(){const n=document,o=n.head;var t="pointer-events: none; height: 1px; width: 0; opacity: 0; visibility: hidden; position: fixed; bottom: 0;";const a=n.createElement("div"),s=n.createElement("div"),d=n.createElement("ins");a.id="div-gpt-ad-3061307416813-0",a.style=t,s.className="textads banner-ads banner_ads ad-unit ad-zone ad-space adsbox ads",s.style=t,d.className="adsbygoogle",d.style="display: none;";const i={allowed:null,elements:[a,s,d]};this.checkAdsStatus=function(t){const e=n.body;"function"==typeof t&&("boolean"==typeof i.allowed?t(i):(e.appendChild(a),e.appendChild(s),e.appendChild(d),setTimeout(function(){if(0===a.offsetHeight||0===s.offsetHeight||d.firstElementChild)i.allowed=!1,t(i);else{const e=n.createElement("script");e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",e.async=!0,e.crossOrigin="anonymous",e.onload=function(){i.allowed=!0,t(i)},e.onerror=function(){i.allowed=!1,t(i)},o.appendChild(e)}a.remove(),s.remove(),d.remove()},40)))}}).call(this);

function antiAdBlockerHandler() {

  window.checkAdsStatus(function(ads) {

    if (!ads.allowed) {

      // Ads are Blocked

      console.log("%c[ADS]", "color:#d32f2f;", "Blocked");

      const icon = "";

      const title = "Ad blocker detected!";

      const message = "
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
";

      // Lets create the popup

      const element = document.createElement("div");

      element.className = "popSc";

      element.innerHTML = "
" + icon + "
" + title + "
" + message + "
"

      document.body.appendChild(element);

    } else {

      // Ads are allowed;

      console.log("%c[ADS]", "color:#43a047;", "Allowed");

    }

  });

  document.removeEventListener("DOMContentLoaded", antiAdBlockerHandler);

};

if (document.readyState === "complete" || document.readyState !== "loading") {

  antiAdBlockerHandler();

} else {

  document.addEventListener("DOMContentLoaded", antiAdBlockerHandler);

}

/*]]>*/
Step 7: Now Click, Save the changes by clicking on this icon 📥