How to add Anti Ad-Blocker in Blogger


Hello, friends welcome to Game Adda World. Nowadays you might be facing some revenue issues because nowadays many visitors use Adblocker on their browser and now latest relates some of the browsers that come with Ad-Blocker out of the box. So in this post, we are going to show you how to add Anti Ad-Blocker in Blogger. So without wasting any time let's start.

How does Anti Ad-Blocker work?

It works when your visitor enter with adblocker enabled on the browser that shows a popup telling them to disable adblocker on their browser. That popup message will be there till they turn off the ad blocker. So they cannot access the website till disabling adblocker.

Advantages of using Anti Ad-Blocker

It will increase your revenue from AdSense or any ad network. It will prevent the visitors from enabling ad blocker on their browser when they visit your website. So it will give you advantages.

How to add Anti Ad-Blocker in Blogger?

Note: Please take your template backup. If any mistake is done while adding these codes. You can fix it by restoring later.

  • First, go to the Blogger dashboard
  • Then select the Theme option
  • Then click on the drop-down menu icon near Customize 
  • Then select Edit HTML option

    Now find ]]></b:skin> and paste this CSS just above it
.popSc{position:fixed;z-index:99981;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}
.popSc .popBo .popBtn{display:inline-flex;justify-content:center;align-items:center;height:50px;width:50px;outline:none;border:none;background:#f3f5fe;border-radius:50%;margin-top:20px;transition:all .2s ease;-webkit-transition:all .2s ease}
.popSc .popBo .popBtn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.popSc .popBo .popBtn svg{width:24px;height:24px;flex-shrink:0;opacity:.8}
.popSc .popBo .popBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.darkMode .popSc, .darkMode .popSc .popBo .popBtn{background:#1f1f1f}
.darkMode .popSc .popBo{background:#2c2d31}
.darkMode .popSc .popBo svg{stroke:#fefefe}
.darkMode .popSc .popBo p, .darkMode .popSc .popBo  h2{color:#fefefe}
@keyframes rotateIcn{from{transform:rotate(0deg)} to{transform:rotate(359deg)}}
@-webkit-keyframes rotateIcn{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(359deg)}}
Then find </body> and paste this code just above it
<!--[ Anti Ad-Blocker ]-->
<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>
<script>/*<![CDATA[*/ /* Anti Ad-Blocker Script (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>
Then save your template.

Now you successfully installed Anti Ad-Blocker in your Blogger website!

Last words!

Hope this How to add Anti Ad-Blocker in Blogger post will be useful to you. If you have any doubts ask me in the comment.

Thanks for visiting!

Comments



Font Size
+
16
-
lines height
+
2
-