Home
Posts

The best method for installing anti ad-blocking script in Blogger

 Dear Friends: Once again, welcome to DaSkilled. I'm going to describe how to put Anti AdBlocker to your Blogger website on this specific occasion.



If you want to safeguard and increase your revenue, you really must install anti adblocker on your website.


What does AdBlocker mean?

AdBlocker is a kind of script or application that prevents advertisements from loading on websites. AdBlocker is used by the user to prevent website advertising from loading, which speeds up page loading times.


What impact do ad blockers have on website owners?

The revenue that website owners receive is reduced when a user disables their browser's AdBlocker to prevent adverts from loading. In the event that a website owner places advertisements on it in order to monetize it and a user uses an adblocker, the advertisements won't load and the website owner won't receive impressions or clicks on them.

It hurts a lot when a creator puts so much effort into making material for his users but receives nothing in return.

Because of this, website owners install an anti-adblocker to prevent users from using adblockers, which would reduce their revenue.


You already know that Adsense pays you for ad impressions and clicks if you utilise it on your blog. These adverts won't load on that website if someone has an adblocker chrome plugin installed. Users won't see any advertising as a consequence, and you won't make money off of their visits.

How does Anti AdBlocker function?

A script called Anti Adblocker is added to a website to disable the AdBlocker installed in the user's browser. When the script determines that AdBlocker is present in the browser, Anti AdBlocker is triggered.

Up until the user disables the AdBlocker, Anti AdBlocker prevents the user from accessing the website's content.

Anti-Adblocker Script Features

You should be aware of a few intriguing and beneficial aspects of this anti-adblocker script for bloggers.

Anti-Adblocker Script features include

  1. No Issue with Content Shifting
  2. Easy to utilise and will greatly increase your profits
  3. Jquery wasn't utilised
  4. created with only HTML, CSS, and JavaScript
  5. stops the majority of Adblocker scripts and addons
  6. interrupts the user's perspective with a straightforward popup

How can a Blogger website include an anti-adblocker script?

Let's have a look at how to implement an anti-adblocker script to a blogger website. The steps listed below should be followed to install anti-adblock software in Blogger.

  1. Get the Anti AdBlocker Script codes by scrolling to the bottom of the page.
  2. The downloaded file contains instructions on how to put the code into practise.
  3. Visit the Blogger Dashboard
  4. Next, select Theme > Edit HTML.
  5. Additionally, adhere to the file's instructions.

Get the Anti AdBlocker script codes from the Blogger website.

Credit for this Anti AdBlocker script goes to Fineshop Design

Step 1: Add this css before </style>

.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}

Step 2: Add this HTML before </body>

<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>

Step 3: Add this JS just after the Above HTML

<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>

Post a Comment

Close