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.
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{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}
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.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 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 </body>.
<!--[ 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>
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="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>
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="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 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.
Conclusion
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.
Reference:
blog.fineshop.eu.org