Tech & Fun Zone

To block disrespectful ads on websites, people often use the Adblock plugin in Wordpress, but what about Blogger? It was a disaster. It can affect many of us blogger's blog earnings because it blocks the display of ads on bloggers' blogs or websites.

But that's okay, if you come across this post, you're in luck. I will guide you How to Add Pop-up Anti Ad Blocker in Blogger 2022.

In this tutorial, I will guide you to How to Add Pop-up Anti Ad Blocker in Blogger 2022 script to help blogger website owners not to lose revenue due to Adblocker.

Short Note

Most Bloggers generate income to maintain their websites by attaching Google Adsense ads or other third-party ad services to their content. However, for some reason, users often have the habit of installing add-ons or using applications or browsers that block ads. This will significantly affect the income of content creators. The code which I am going to provide in this article will help content creators to Add Pop-up Anti Ad Blocker in Blogger.

Benfits of using Pop-up Anti Ad Blocker in Blogger

When the Anti Adblockcode is embedded in the website, users using the ad blocker will not be able to see your content. At that time, a popup window will appear asking viewers to turn off the Adblocker utility to access the content. Hence they have to turn off the ad block services to see your content

How to Add Pop-up Anti Ad Blocker in Blogger 2022

To Add Pop-up Anti Ad Block in Blogger It Takes Only Three Steps:-

1. Make a HTML Code and define
2. Make a CSS Code and define styling
3. Add Some JavaScript Code to function the Ad Block Script

Adding Pop-up Anti-Adblocker in Your Blogger Website

1. : Most importantly Login into your Blogger Dashboard.
2. : On Blogger Dashboard, click on Theme.
3. : Click the arrow down icon next to the 'Customize' button.
4. : Now Click on Edit HTML Option, and you will be redirected to the theme editing page.
5. : Now add the following HTML Code just above to </body> tag. If you don't find it, it is probably already parsed which is now showing something like <!--</body>--></body> or &lt;/body&gt;.

Important!Before starting this tutorial please backup your theme and save it for any kind of error during tutorial and easy restoration.

 <!--[ Pop-Up Anti Ad-Blocker by TechAndFunZone ]-->
<div class='popSc hidden' id='antiAdBlock'>
<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>;

6. : Now after adding the upper code, Add some JavaScript Code to Work this Pop-up Anti Ad Blocker Flawlessly. Add this JS Code just below the HTML Code that we have pasted earlier

The below JavaScript loads with some delay, so it can't reduce the page loading speed. The scripts will only be loaded if the user scrolls the page which will not affect the 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>

7. Now we will create CSS code to give some styles and animation to work with the above HTML and JS code.
8. Copy this CSS and Paste this before <b:/skin> Tag.

If your template has a dark mode feature, and if you want a different color when in dark mode, you can customize 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 2) by TechAndFunZone */
.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}
.drK .popSc{background:rgba(0, 0, 0, 0.1)}
.drK .popSc .popBo{background:rgba(50, 50, 50, 0.8)}
.drK .popSc .popBo svg{stroke:#fefefe}
.drK .popSc .popBo p, .drK .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}}

9. : And in Last, Save the changes by clicking on the save icon

That's all, this is the tutorial on How to Add Pop-up Anti Ad Blocker in Blogger 2022.You can customize this code further as per your requirement and need. If you feel any difficulty regarding this then free to comment below.

Final words

I hope this will be helpful for you guyzz. We hope this article How to Add Pop-up Anti Ad Blocker in Blogger 2022 would turn out to be useful for you. If you like this article, share it along with your friends. If you have any issues regarding this feel free to comment down or Contact us. One more thing is to give your support to our site and share this post as much as you can.

Go to Link

© Tech & Fun Zone