How to Add Anti Ad Blocker in Blogger Site

Hello Viewers, Welcome to My Site “Shubham Blogging”. I hope all are doing good. So guys I think you known after the monetization in your site the add start showing. But some browsers have ad Blocker, so because of that the ads don’t show in your site. This results in less income from your site.

So Today , I will share How to Add Anti Ad Blocker in Blogger Website in blogger site and force the viewers to turn off the ad blocker. The process is very easy and you can easily do it from your mobile only.

Before adding the anti ads blocker in your site take a backup, if any error comes so you can easily restore your theme.

Steps to Add Anti Ads Blocker in Blogger Site

Step 1 :- In Blogger Dashboard, Go to Theme

Step 2 :- Click on the arrow next to customize button

Step 3 :- Click on Edit HTML

Step 4 :- Search the code ]]></b:skin> and paste the following CSS just above it.

Guys there are two CSS , the In first CSS the ads blocker is normal but in second CSS the ad blocker had a blur background

Guys, If your template has a dark mode, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please change it, you can replace the marked class with your template dark mode class.

Ad Blocker with Normal Background

/* Pop-Up Box (Style 1) by Fineshop */.popSc{position:fixed;z-index:99999;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}.darkMode .popSc{background:#1f1f1f}.darkMode .popSc .popBo{background:#2c2d31}.darkMode .popSc .popBo svg{stroke:#fefefe}.darkMode .popSc .popBo p, .darkMode .popSc .popBo  h2{color:#fefefe}

Ad Blocker with Blur Background

/* Pop-Up Box (Style 2) by Fineshop */
.popSc{position:fixed;top:0;bottom:0;left:0;right:0;padding:20px;background:rgba(255, 255, 255, 0.1);z-index:99999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center}
.popSc.hidden{display:none}
.popSc .popBo{position:relative;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:20px;box-shadow:0 5px 25px rgb(0 0 0 / 20%)}
.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{animation:popupBlur .3s ease-in; -webkit-animation:popupBlur .3s}
.popSc >*{animation:popupScale .3s ease-in; -webkit-animation:popupScale .3s}
.darkMode .popSc{background:rgba(0, 0, 0, 0.1)}
.darkMode .popSc .popBo{background:rgba(50, 50, 50, 0.8)}
.darkMode .popSc .popBo svg{stroke:#fefefe}
.darkMode .popSc .popBo p, .darkMode .popSc .popBo h2{color:#fefefe}
@keyframes popupBlur {from{opacity:0}to{opacity:1}}
@-webkit-keyframes popupBlur{from{opacity:0}to{opacity:1}}
@keyframes popupScale{from{transform:scale(0);animation-timing-function:ease-in;opacity:0}to{transform:scale(1);opacity:1}}
@-webkit-keyframes popupScale{from{-webkit-transform:scale(0);-webkit-animation-timing-function: ease-in;opacity:0}to{-webkit-transform:scale(1);opacity:1}}

Step 5 :- Find </body> tag. If you find difficult in finding the tag then use this tag <!–</body>–></body> or &lt;/body&gt; (Guys Body End tag is always in the end of your theme

Step 6 :- Add the Html and JavaScript code just above the body tag

Guys there are two types of JavaScript code . The first type JavaScript loads faster which may affect your theme speed and The Second type is lazy load JavaScript which will not affect your site speed. Note :- HTML will not affect your speed and there is only one html code.

Normal JavaScript Code (HTML are same in both code)

<!--[ Anti Ad-Blocker by Fineshop ]--><div id='antiAdBlock' class='popSc hidden'>  <div class='popBo'>    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10'/><line x1='12' x2='12' y1='8' y2='12'/><line x1='12' x2='12.01' y1='16' y2='16'/></svg>    <h2>Ad-Blocker Detected!</h2>    <p>Sorry, we detected that you have activated Ad-Blocker.<br/>Please consider supporting us by disabling your Ad-Blocker, it helps us in developing this Website.<br/>Thank you!</p>  </div></div>
<!--[ Normal JavaScript ]-->
<script>/*<![CDATA[*/ /* Anti Ad-Blocker Script by Fineshop (NoLazy) */ !function(){var antiAdBlock=document.querySelector("#antiAdBlock");var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";e.onerror=function(){if(antiAdBlock!=null){antiAdBlock.classList.remove("hidden")}};var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(); /*]]>*/</script>

Lazy Load JavaScript Code (HTML are same in both code)

<!--[ Anti Ad-Blocker by Fineshop ]--><div id='antiAdBlock' class='popSc hidden'>  <div class='popBo'>    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10'/><line x1='12' x2='12' y1='8' y2='12'/><line x1='12' x2='12.01' y1='16' y2='16'/></svg>    <h2>Ad-Blocker Detected!</h2>    <p>Sorry, we detected that you have activated Ad-Blocker.<br/>Please consider supporting us by disabling your Ad-Blocker, it helps us in developing this Website.<br/>Thank you!</p>  </div></div>
<!--[ Lazy Load JavaScript ]-->
<script>/*<![CDATA[*/ /* Anti Ad-Blocker Script by Fineshop (Lazyload) */ var lazyAnti=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyAnti||0!=document.body.scrollTop&&!1===lazyAnti)&&(!function(){var antiAdBlock=document.querySelector("#antiAdBlock");var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";e.onerror=function(){if(antiAdBlock!=null){antiAdBlock.classList.remove("hidden");window.lazyAnti=!0}};var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyAnti=!0)},!0); /*]]>*/</script>

Step 7 :- Click on Save

Conclusion

In this post I shared you “How to Add Anti Ad Blocker in Blogger Site“. I hope that you like my post. Please visit our site daily for more new posts. Thankyou for visiting our site.

 

Leave a Comment