Anti Ad Blocker

Posted by YZG | YzTheme Addson at October 22, 2024

"Anti-AdBlock script on a blogger. A notification will appear to visitors to turn off their AdBlock extension."

Details

Anti Adblocker plugin. This plugin will prevent your Blog content from being displayed if the visitor uses an AdBlocker. Very useful for Blog owners who are heavily dependent on advertising revenue.

Demo

Activate your Ad-blocker addson to see demo live

Code

CSS

#anti-adblock{background:rgba(28,39,51,0.67);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#anti-adblock .header{margin:10px 0 20px 0;position:relative;top:initial;left:initial}
#anti-adblock .header h2{color:#222;font-size:1.8rem}
#anti-adblock .inner{background:#fff;border-radius:8px;color:#222;box-shadow:0 0 2rem -1rem rgba(0,0,0,0.5);text-align:center;width:100%;max-width:640px;padding:30px;margin:7% auto 2% auto;animation:flipInX 1s}
#anti-adblock button{position:relative;overflow:hidden;padding:6px 20px;background:#f5aa33;color:#fff;margin:20px 5px;cursor:pointer;border-radius:8px;font-size:13px;font-weight:500;border:2px solid #f5aa33;transition:initial;box-shadow:0 1px 0 rgba(0,0,0,0.01),0 5px 10px rgba(0,0,0,0.1)}
#anti-adblock button:hover{background:#fff;color:#f5aa33;outline:none;border-color:#f5aa33}
#anti-adblock button.active,#anti-adblock button:hover.active{background:#ee5253;color:#fff;border-color:#ee5253;outline:none}
#anti-adblock .method{background:#f7f9f8;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px;border-radius:8px;border:1px solid rgba(155,155,155,0.15)}
#anti-adblock .method div{display:none}
#anti-adblock .method div.active{display:block;animation:fadeInUp .5s}
#anti-adblock ul{margin-left:20px}
#anti-adblock button:after,#anti-adblock button:before{content:'';display:block;position:absolute;bottom:0;right:0;left:0;height:50%;background:rgba(155,155,155,0.15);background-repeat:no-repeat;transition:all .3s}
#anti-adblock button:before{height:0;top:0;bottom:initial}
#anti-adblock button:hover:after{height:0}
#anti-adblock button:hover:before{height:50%}
@media only screen and (max-width: 680px) {
#anti-adblock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}

JavaScript

/* Anti AdBlocker from https://codepen.io/pomsd/pen/NWoWxrY */
!function(){function f(){var a=document.createElement("div");a.id="anti-adblock",a.innerHTML='<div class="inner"> <div class="header"> <h2>Ad Blocker Detected</h2> </div> <div class="contents"> <p>Please consider supporting us by disabling your ad blocker</p> <div class="anti-adblock-button"><button class="1 active">Adblock</button><button class="2">Adblock Plus</button></div> <div class="method"> <div class="1 active"> <ul> <li>Click on the AdBlock icon in your browser<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjVV5qnf6xlAUeAoxM_HAtOWW9gHNIXFdhuZwNEUJVEgEfUIB9Hig1RMRFc-kQO4ZuRvG12-HvfvNq3eGWoITBH3dVN8BN-SQBLSKoQe7j1zLPZLWqqFni4AD7YRMMHaPRxOM3QGFyU2j5UAxYbvLGhbO2ccRvHtnulvELksahT-SoYd9JXIqURmqtN" alt="Adblock"></li> <li>Choose, Don\'t run on pages on this domain<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEhfac1Bx5KMgXBVzdNq8Mw_kobbUgaRunIDbyQx-WHyM0-rvCj-QxM3IhKQEUovXytA1XOYFmK6luHwhNnVlOYhsjOE_j65N7VQiKvNS63EXcr4KCSrJ1RgG3Ivb7sF7AZ2SARMHHZHCvB5zNHG013RMBnNN3gXSB8bk8qqhFkyDL4ojZ1FxHphQ1iQ" alt="Adblock" width="100%" max-width="300px"></li> <li>A new window will appear. Click on the "Exclude" button<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEi6PBdCbDVAMwflDr3oGGEgaWc-IXlNy47uZ37SS2Y7CrGn8VTtUizW1IUc9FUMQb9H6AbMaepOM-gNcYNmRVzYVcf0ORDEis2yWhGuJlaVDsq_Xv1nxU1X-X3Biv5UdBo4dv06bqHObSBeOUesq85hqbh2-9fVYuR5qYcsAk--XTLw7nn6IkHIhQpn" alt="Adblock" width="100%" max-width="300px"></li> <li>The browser icon should have turned grey<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjMN1MgI-QJWgMlLhLsRVpk3AZCqdT2huCk80o-2TtLUTiQUWHm6wfNL_0DPDJXPIRl7jF0u65XM8apgppNz3rH4_POoy7_B71RIKNDn7OfBFI5AiEQytfUjX8r4Jn9lmPrUdzereXkbH8G4Zv3nlY92EFP8nN3DgiGq2lwQnyN870zbpkWLMAK5ota" alt="Adblock"></li> <li>Refresh the page if it didn\'t refresh automatically. Thanks!</li> </ul> </div> <div class="2"> <ul> <li>Click on the AdBlock Plus icon in your browser<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEinXHNBxCdHMkpohhgHfLngIDAwB5MBPzM12BvmOjpQHj1H5R6TcqQCdv-3lgAlGSWL7U_KKixkyxKyMNUrWS91s8kap-j7webwqlx87KYRUMtohIvBS8_BFy2XkVf2kLAsOuq3nxUVO605lN1Nc797YN85pMhxvuUxffbZvHBiNKGK2YK1Wo-lQj8n" alt="Adblock"></li> <li>Click on "Enabled on this site" position<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEi5ekBmhGQSvOdmaiEdOT035KwOpnBw3y-7A7fOzxJenZlEY-vJNyCcJra1LRB7fChSm-F0YQxzQoxdQnxepPYOWuVyIe2xG9V5DfFmvUytmvG9ik86BteC4Z1DDDbaLxsxEDQiQo79mSpsqcg3fXwCoWySuPulGArgD3Tjq4jwiHtuWLp0Ny2COWpo" alt="Adblock" width="100%" max-width="250px"></li> <li>Once clicked, it should change to "Disabled on this site"<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEh-jicavDWSvrxMtWYRY-L662ThBbR2nuaEdlxmOk_yKNagUOpifvto_vejEs9zsHj-g2tNldrCodYeegITHb-TqhWUk696IUb4n5TJBR3wf3f5zNkMlJuT_SHnQgBqWaJo0OjyDDWiQTXVkuLMvpcTQiSiaERE1JxS69DKTDc3apCmTBHr-8fu38hg" alt="Adblock" width="100%" max-width="250px"></li> <li>The browser icon should have turned grey<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEh9QLA68ighvUEcutw_661Ue7SIP4c6WtfMO9dezT6NwmsPsNHTX5t7uaWOVVA5Vwcq5tr8DAHP42rEM2oBgXddN1U7vpDSboigTct8a-4w-dmYGV3TejQAPCiVjAVKQtjDdtsSC744pTZFcQ5FNK33Ii2F1vBam2Z8PI9w2BFr-bjH2z6pwhuibgtT" alt="Adblock"></li> <li>Refresh the page if it didn\'t refresh automatically. Thanks!</li> </ul> </div> </div> </div> </div>',document.body.append(a),document.body.style.overflow="hidden";var b=a.querySelectorAll("button");a.querySelector(".close");var d=a.querySelectorAll(".method > div");for(a=0;a<b.length;a++)b[a].addEventListener("click",function(a){a.preventDefault(),a=this.getAttribute("class").split(" ")[0];for(var c=0;c<d.length;c++)d[c].classList.remove("active"),b[c].classList.remove("active");b[a-1].classList.add("active"),d[a-1].classList.add("active")})}var b=document.createElement("script");b.type="text/javascript",b.async=!0,b.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",b.onerror=function(){f(),window.adblock=!0};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(b,e)}();

Help Me Install

Comments