| <div id="ykth"><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="none"">×</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 --> | |
| </div></div> | |
| <script type="text/javascript" src="https://cdn.rawgit.com/Yuukithemes/yuukithemes.github.io/92c11f42/js/advertisement.js"></script> |
| /* | |
| AdBlocks | |
| - https://gist.github.com/6174/6062387 | |
| - https://www.detectadblock.com/ | |
| - https://yuukithemes.com/ | |
| */ | |
| var ykrd1=Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); | |
| var ykrd2=Math.random().toString(36).substring(2, 7); | |
| var e=document.getElementById("ykth");e.setAttribute("id", ykrd1);e.classList.add("ykwrp_"+ykrd2); | |
| if(!window.showAds){document.getElementById(ykrd1).style.display='block';} |
Install / Enable your Adblock for see this demo (example).
This simple javascript for detect adblock user, and element not can hidden adblock, because id is random... + notice for user who disable javascript too..
Credits :
A Pen by Yuukithemes on CodePen.
| /* Inspiration Design 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} | |
| div[class^="ykwrp_"]:before,#ykth:before{content:"";position:fixed;background:#00000055;top:0;left:0;right:0;bottom:0;width:100%;height:100%} | |
| .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)}} |