Buy Plus UI v2.6! Demo Buy Now!

How to Add Anti Adblocker In Your Blogger Website

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello viewers How are you I hope you are doing well. With best regards welcome to my Tech Aadi blog.

I hope you know that after monetization of your blog. Some browsers have anti Adblocker features which disable the ads of your monetized blog. This result in decreased in your income.

So today we are going to see How to Add Anti Adblocker In Your Blogger Website for letting your users force to turn off the Adblocker to view the contents of the blog.

How to Add Anti Adblocker In Your Blogger Website

So let's start the process of adding Anti Adblocker in your blogger blog. It is a very easy and minimal process you have to do it. So simply follow the below given steps one by one. This Anti Adblocker is made by one of ouw friend so if you are using it please do not remove the credit because it won't affect your blog in anyways.

Important!Before starting please backup your blog template for any kind of errror and easy restoration.

Adding Anti-Adblocker for Your Blogger Blog

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

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

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

If your template has a dark mode feature, 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.

/* Pop-Up Box (Style 1) by Fineshop */
.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}

Add the following CSS instead of adding CSS provided above to get an alternative look with Blur Effect.

/* 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 .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 6: Now add the following HTML just above to </body> tag. If you don't find it, it is probably already parsed which is <!--</body>--></body> or &lt;/body&gt;.

<!--[ Anti Ad-Blocker by Fineshop ]-->
<div id='antiAdBlock' class='popSc hidden'>
  <div class='popBo'>
    <svg viewBox='0 0 24 24' xmlns=''><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>

Step 7: After that, add the following JavaScript just below the HTML Code that we have pasted in Step 6.

<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="";e.onerror=function(){if(antiAdBlock!=null){antiAdBlock.classList.remove("hidden")}};var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(); /*]]>*/</script>

The above JavaScript loads without any delay, so it may reduce page loading speed. If you don't want to affect page loading speed, you can paste the following given below JavaScript instead of pasting the JavaScript provided above. The scripts will only be loaded if user scrolls the page that will not affect loading speed of webpages.

<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="";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 8: Lastly, Save the changes by clicking on this icon

Now complete. I hope you have successfully installed the Anti-Adblocker on your blog. If you got any error kindly contact us.


I hope you have liked this article. So today we have discussed about How to Add Anti Adblocker In Your Blogger Website. If you got any query kindly do comment below.


Getting Info...

About the Author

Hello Friends. Welcome to my website. I hope you all are doing good. If you like our work. Please revisit again. And do like and follow our blogs.

Buy me a Coffee

Post a Comment

Please do not spam in the comment section or your comment will not be approved.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
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.