4.5 638

Anti Adblock For WordPress and Blogger

Posted by zerochan on July 5, 2018

Loading the translation ...

Previously I have released the same article that is anti adblock using blockadblock in this blog, but anti adblock is quite aggravating blog, so this time I will release a simple anti adblock without wordpress plugins, although simple but proven to block users who are using extension / plugin adblock in the browser.

This tutorial I’ve posted on my old blog that is usagilabs and this time I posted again with some design changes on the notification.

yuukithemes, anti adblock, install anti adblock in website, blogger, wordpress, anti adblock blogger

The script from this tutorial I took from Detectadblock site, then I developed with some additional features to keep anti adblock still appear even though the user uses adblock or adblock plus plugin in browser. and also this notice anti adblock still appears when user turns off javascript

Well for those who can not wait to install it on the blog, please continue step how to install simple anti adblock below.

How to Install Anti Adblock to WordPress Without Plugins

1. Log in to your WordPress Dashboard.
2. Go to Appearance > Editor
3. Select footer.php
4. Add the code below just above the </body> code (use CTRL + F in editor)

<div id="ykth" style="display:none;"><div class="ykth-inner"><div class='ykth-head'><svg style="width:30px;height:30px" viewBox="0 0 26 26"><path fill="#FFFFFF" d="M13,13H11V7H13M12,17.3A1.3,1.3 0 0,1 10.7,16A1.3,1.3 0 0,1 12,14.7A1.3,1.3 0 0,1 13.3,16A1.3,1.3 0 0,1 12,17.3M15.73,3H8.27L3,8.27V15.73L8.27,21H15.73L21,15.73V8.27L15.73,3Z"/></svg><b>Adblock Detect</b><p>We have detected that you are using adblock in your browser</p><i class="close" onclick="document.getElementById(ykrd1).style.display=&quot;none&quot;">&#215</i></div><div class='ykth-body'><p>Our website is made possible by displaying online advertisements to our visitors.</p><p>Please consider supporting us by disabling your ad blocker.</p></div>
<!-- Start Condition When JS Disable -->
<noscript><div class="ykth-body"><p>Javascript is disabled in your web browser.</p><p>For full functionality of this site it is necessary to enable JavaScript. Here are the <a href="https://www.enable-javascript.com/" target="_blank"> instructions how to enable JavaScript in your web browser</a>.</p></div><style>#ykth{display:block;}.ykth-inner>.ykth-body{display:none;}.ykth-head>b,.ykth-head>p{font-size:0}.ykth-head>b:before{content:"Javascript Detected";font-size:16px}.ykth-head>p:before{content:"We have detected that you are disable javascript in your browser";font-size:14px}</style></noscript>
<!-- End Condition When JS Disable -->
<style>/* Notice design by https://7design.studio/ui_and_ux/Notification_Template */div[class^="ykwrp_"]{display:none}.ykth-inner{font-family:"Open Sans","Roboto",Segoe UI,sans-serif;background:#FFF;position:fixed;width:40%;left:0;right:0;top:30%;margin:auto;z-index:1001}div[class^="ykwrp_"]:before,#ykth:before{content:"";position:fixed;background:#00000055;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:1000}.ykth-head{background:#de2b2b;color:#FFF;padding:20px}.ykth-head>svg{float:left;margin:0 9px 0 0;animation:shake .82s cubic-bezier(.36,.07,.19,.97) 7;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}.ykth-head>i{position:absolute;top:16px;right:16px;cursor:pointer;line-height:13px;font-size:21px;font-weight:700;font-style:normal}.ykth-head>b{font-size:16px;font-weight:700;text-transform:uppercase}.ykth-head>p{margin:0 0 0 35px;font-size:14px}.ykth-body{padding:20px;font-size:100%;line-height:1.7}.ykth-body>p{margin:0 0 10px}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}</style>
</div></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Yuukithemes/yuukithemes.github.io@92c11f429e84430262a283187f068ffd624e28eb/js/advertisement.js"></script>
<script type="text/javascript">
/*
Anti AdBlocks [7/5/18]
- https://www.detectadblock.com/
- https://gist.github.com/6174/6062387
- https://yuukithemes.com/
*/
var ykrd1=Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15),ykrd2=Math.random().toString(36).substring(2,7),e=document.getElementById("ykth");e.setAttribute("id",ykrd1),e.classList.add("ykwrp_"+ykrd2),window.showAds||(document.getElementById(ykrd1).style.display="block");
</script>
5. Click Update File

How to Install Anti Adblock / Adblock Killer on Blogger

1. Choose your blog
2. Click Menu Theme
3. Click Button Edit HTML
4. Add the code below just above the </body> code (use CTRL + F in editor)

<div id="ykth" style="display:none;"><div class="ykth-inner"><div class='ykth-head'><svg style="width:30px;height:30px" viewBox="0 0 26 26"><path fill="#FFFFFF" d="M13,13H11V7H13M12,17.3A1.3,1.3 0 0,1 10.7,16A1.3,1.3 0 0,1 12,14.7A1.3,1.3 0 0,1 13.3,16A1.3,1.3 0 0,1 12,17.3M15.73,3H8.27L3,8.27V15.73L8.27,21H15.73L21,15.73V8.27L15.73,3Z"/></svg><b>Adblock Detect</b><p>We have detected that you are using adblock in your browser</p><i class="close" onclick="document.getElementById(ykrd1).style.display=&quot;none&quot;">&amp;#215</i></div><div class='ykth-body'><p>Our website is made possible by displaying online advertisements to our visitors.</p><p>Please consider supporting us by disabling your ad blocker.</p></div>
<!-- Start Condition When JS Disable -->
<noscript><div class="ykth-body"><p>Javascript is disabled in your web browser.</p><p>For full functionality of this site it is necessary to enable JavaScript. Here are the <a href="https://www.enable-javascript.com/" target="_blank"> instructions how to enable JavaScript in your web browser</a>.</p></div><style>#ykth{display:block;}.ykth-inner>.ykth-body{display:none;}.ykth-head>b,.ykth-head>p{font-size:0}.ykth-head>b:before{content:"Javascript Detected";font-size:16px}.ykth-head>p:before{content:"We have detected that you are disable javascript in your browser";font-size:14px}</style></noscript>
<!-- End Condition When JS Disable -->
<style>/* Notice design by https://7design.studio/ui_and_ux/Notification_Template */div[class^="ykwrp_"]{display:none}.ykth-inner{font-family:"Open Sans","Roboto",Segoe UI,sans-serif;background:#FFF;position:fixed;width:40%;left:0;right:0;top:30%;margin:auto;z-index:1001}div[class^="ykwrp_"]:before,#ykth:before{content:"";position:fixed;background:#00000055;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:1000}.ykth-head{background:#de2b2b;color:#FFF;padding:20px}.ykth-head>svg{float:left;margin:0 9px 0 0;animation:shake .82s cubic-bezier(.36,.07,.19,.97) 7;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}.ykth-head>i{position:absolute;top:16px;right:16px;cursor:pointer;line-height:13px;font-size:21px;font-weight:700;font-style:normal}.ykth-head>b{font-size:16px;font-weight:700;text-transform:uppercase}.ykth-head>p{margin:0 0 0 35px;font-size:14px}.ykth-body{padding:20px;font-size:100%;line-height:1.7}.ykth-body>p{margin:0 0 10px}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}</style>
</div></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Yuukithemes/yuukithemes.github.io@92c11f429e84430262a283187f068ffd624e28eb/js/advertisement.js"></script>
<script type="text/javascript">
/*
Anti AdBlocks [7/5/18]
- https://www.detectadblock.com/
- https://gist.github.com/6174/6062387
- https://yuukithemes.com/
*/
var ykrd1=Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15),ykrd2=Math.random().toString(36).substring(2,7),e=document.getElementById("ykth");e.setAttribute("id",ykrd1),e.classList.add("ykwrp_"+ykrd2),window.showAds||(document.getElementById(ykrd1).style.display="block");
</script>
5. Click Update File

Demo / View Result

anti adblock notice
and for those who are curious to see the results directly please click the button below. btw you have to install / activate you adblock plugin in your browser to see the result.

View Result

Changelog

v1.0 [7/5/18]
- Release Script

v1.1 [7/31/18]
- Add Css z-index
- Add Style display:none;

If there are still errors or bugs in this script you can report it by way of commenting on this post. thank you

Reference
I made this article not alone, I also glanced at some references to add my insight in making this article.
– https://www.detectadblock.com/
– https://gist.github.com/6174/6062387
– https://7design.studio/ui_and_ux/Notification_Template/
– https://translate.google.com

Related Post

Comments

Waiting Load Disqus Comments ...