How to add Anti Ad Blocker in Blogger (Pure CSS and JS)

Hello, guys welcome here, nowadays many users use Ad Blocker extensions and nowadays several browsers came integrated with Adblocker, it decreasing the revenue of bloggers, and developers of that website, As a solution for it we sharing this tutorial for you to say how to add Anti Ad-blocker in Blogger, So without wasting much time let's check how to add Anti-Ad blocker in your Blogger website.

How to add Anti Ad Blocker in Blogger?

First, go to your Blogger dashboard

Then click on the Theme option

Then click on the drop-down icon near Customize option

Then click on the Edit HTML option

Then find ]]></b:skin> and paste the following CSS just above it or you can paste it above <head/> tag by adding <style></style>

/* Ad Blocker by STW-WEB */.bg-effect,.popup-box{position:fixed;width:100%;opacity:0;pointer-events:none}.bg-effect.show,.popup-box.show{opacity:1;pointer-events:auto}.popup-box,.popup-box h2{color:#000}.popup-box{box-sizing:unset;max-width:380px;top:50%;left:50%;padding:20px;background:#ffa7a7;border-radius:20px;z-index:2147483647;transform:translate(-50%,-50%) scale(1.2);box-shadow:10px 10px 15px rgba(0,0,0,.06);transition:opacity .2s ease-in-out,transform .2s ease-in-out}.popup-box.show{transform:translate(-50%,-50%) scale(1)}@media screen and (max-width:600px){.popup-box{transform:translate(-50%,-50%) scale(.7)}.popup-box.show{transform:translate(-50%,-50%) scale(.9)}.popup-box h2{text-align:center}}.bg-effect{backdrop-filter:blur(2px) sepia() brightness(0.5) grayscale(1);left:0;top:0;z-index:2147484000;height:100%;background:rgba(0,0,0,.2);transition:opacity .3s}.popup-box .content,.popup-box .content .sad-icon,.popup-box .sad-icon .icon{display:flex;align-items:center;justify-content:center}.popup-box .content{flex-direction:column}.popup-box .content .sad-icon{height:115px;width:115px;border-radius:50%;background:#005af0}.popup-box .sad-icon .icon{height:100px;width:100px;background:#fff;border-radius:inherit}.popup-box .content h2{margin:40px 0 0;font-size:30px;font-weight:600;letter-spacing:1px}.popup-box .content p{margin:23px 0 0;font-size:17px;text-align:center;line-height:30px}.popup-box .content p a{color:#005af0}.popup-box .content p a:hover{text-decoration:underline}.popup-box .content .stw-btn{margin-top:30px;padding:15px 27px;font-size:17px;border:none;outline:0;color:#fff;cursor:pointer;border-radius:50px;background:#005af0;transition:background .3s}.icon-exclamation:before{background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath strokeLinecap='round' strokeLinejoin='round' d='M15.182 16.318A4.486 4.486 0 0012.016 15a4.486 4.486 0 00-3.198 1.318M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z'/%3E%3C/svg%3E");width:80px;height:80px;background-size:100%;content:"";display:inline-block;vertical-align:middle}

Then copy the following HTML code and paste it just above </body> tag

<!--[ Ad Blocker by STW-WEB ]-->
<div id='detect'></div>
<div class='bg-effect'></div>
<div class='popup-box'>
    <div class='content'>
      <!--[ Ad Blocker Sad icon ]-->
        <div class='sad-icon'>
        <span class='icon'><i class='has-svg-icon icon-exclamation'></i></span>
        </div>
      <!--[ Ad Blocker Heading ]-->
        <h2>Ad Blocker Detected!</h2>
        <!--[ Ad Blocker Description ]-->
        <p>Please <b>whitelist</b> our website from your Ad Blocker, We provide you free contents by displaying Ads.</p>
        <!--[ Ad Blocker refresh Button ]-->
        <a href='javascript:location.reload(true)'><button class='stw-btn'>Refresh</button></a>
    </div>
</div>

Then paste the following JS just below we pasted the HTML code

<script>/*<![CDATA[*//* Ad Blocker by STW-WEB */window.addEventListener("load",function(){let e=document.querySelector("#detect"),s=document.querySelector(".popup-box"),t=document.querySelector(".bg-effect");for(let o of["ad","ads","adsbox","doubleclick","ad-placement","ad-placeholder","adbadge","BannerAd"])e.classList.add(o);let a=window.getComputedStyle(e).getPropertyValue("display");s.classList.contains("show")||("none"==a?s.classList.add("show"):s.classList.remove("show"),"none"==a?t.classList.add("show"):t.classList.remove("show")),dismissBtn.addEventListener("click",()=>{s.classList.remove("show"),t.classList.remove("show")})});/*]]>*/</script>

Conclusion

Hope this How to add Anti Ad Blocker in Blogger (Pure CSS and JS) tutorial will be useful to you, If you have any doubts related to this tutorial ask me in the comments, Do share with your friends, Thanks for visiting our site, Have a nice day!

How to add Anti Ad Blocker in Blogger (Pure CSS and JS)

How to add Anti Ad Blocker in Blogger?

Conclusion

Join the conversation