What is Adblock?
Adblock is an extension on a browser or application to remove ads on sites, as we know that ads on blogs sometimes annoy visitors, therefore internet users start using the Adblock extension.
Benefits of Adblock Killer?
But on the other hand, for a blog writer who implements good ads from Google AdSense, it is one of the threats to decrease revenue from blogs. To overcome this we need to add an Adblock Killer script to the blog.
How Adblock Killer works?
Its function remains the same, namely by giving notifications to visitors to disable the Adblock extension for this site but with a different appearance. To install it, please follow the steps below.
( 1 ) How to Install the Latest Version of Adblock Killer?
( 1 ) First open the Blogger dashboard > Click the Theme menu > Click the Edit HTML button and add the code below before the code </head> or code </head><!--<head/>-->
<style>
/* Say Hi to Adblock redesign by Droidnur123 */
@keyframes flipInX{from{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}
@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}
#arlinablock ::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#arlinablock ::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#arlinablock ::-webkit-scrollbar-track{background-color:transparent}#arlinablock ::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
#arlinablock{background:rgba(34,47,62,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)}
#arlinablock .header{margin:10px 0 20px 0;position:relative;top:initial;left:initial}
#arlinablock .header h2{color:#222;font-size:1.8rem}
#arlinablock .inner{background:#fff;border-radius:12px;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}
#arlinablock button{position:relative;overflow:hidden;padding:6px 20px;background:#f5aa33;color:#fff;margin:20px 5px;cursor:pointer;border-radius:99em;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)}
#arlinablock button:hover{background:#fff;color:#f5aa33;outline:none;border-color:#f5aa33}
#arlinablock button.active,#arlinablock button:hover.active{background:#ee5253;color:#fff;border-color:#ee5253;outline:none}
#arlinablock .fixblock{background:#f7f9f8;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px;border-radius:8px;border:1px solid rgba(0,0,0,0.05)}
#arlinablock .fixblock div{display:none}
#arlinablock .fixblock div.active{display:block;animation:fadeInUp .5s}
#arlinablock ol{margin-left:20px}
#arlinablock button:after,#arlinablock button:before{content:'';display:block;position:absolute;bottom:0;right:0;left:0;height:50%;background:rgba(0,0,0,0.05);background-repeat:no-repeat;transition:all .3s}
#arlinablock button:before{height:0;top:0;bottom:initial}
#arlinablock button:hover:after{height:0}
#arlinablock button:hover:before{height:50%}
@media(max-width:768px){#arlinablock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}
</style>
( 2 ) Next add this code before </body> or <!--</body>--></body>
<script>
//<![CDATA[
// Say Hi to Adblock
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/arlinablock.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
At last, click Save theme and done. This Adblock notification will appear if a visitor visits our site and activates the Adblock extension. Make sure you need to enable the Adblock extension to see the Demo in the link below.
Demo
If anyone has installed the Adsense JS code in a template like this
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Or like this
<script>
//<![CDATA[
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
//]]>
</script>