Popup hiển thị thông báo khi phát hiện trình duyệt sử dụng Plugin Adblocker
Chào các bạn, hiện nay việc đặt những loại quảng cáo lên website khiến nhiều người dùng trở nên khó chịu. Và một công cụ chặn các quảng cáo như Plugin Adblocker được rất nhiều người sử dụng.
Đối với chủ nhân của một website/blog thì Plugin này lại trở thành một kẻ thù 😪
Hôm nay mình sẽ hướng dẫn các bạn cách tạo một Popup hiển thị thông báo khi phát hiện trình duyệt sử dụng Plugin Adblocker, nếu người đọc họ ủng hộ bạn, thì họ sẽ tắt và ngược lại nhé 😝
Hướng dẫn cách làm:
Bước 1: Bạn đăng nhập Blogger -> Mẫu -> Chỉnh sửa HTML -> Tìm tới thẻ ]]></b:skin> và dán toàn bộ CSS sau lên trên thẻ đó:/* Notifikasi Adblocker Adsense */Bước 2: Bạn tìm tới thẻ đóng của </body> của blog và dán Javascript sau lên trên thẻ đó:
#keep-ads{padding:0;position:fixed;bottom:0;opacity:0;height:auto;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;}
.keep-adsme{background:#e74c3c;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;line-height:1.5;font-family:monospace;max-width:930px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);transition:all .6s cubic-bezier(.25,.8,.25,1);border:15px solid rgba(0,0,0,.07);overflow:hidden;}
.keep-adsme:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);}
.keep-adsme h4{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;margin:0 auto;}
#keep-ads p{margin:0;}
#keep-ads a{color:#ffe88b;}
#keep-ads a:hover{color:#ffe88b;text-decoration:underline;}
#keep-ads.show{left:0;top:0;right:0;z-index:1000;pointer-events:auto;opacity:1;visibility:visible;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);animation:wobble .7s;opacity:1;}
.close-keep-ads{visibility:hidden;opacity:0;color:#ffe88b;text-align:center;position:absolute;bottom:10px;right:10px;font-size:42px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all .6s cubic-bezier(.25,.8,.25,1);transform:translate(0,50px);}
.close-keep-ads:hover{color:#fff;transform:scale(1.0);}
.keep-adsme:hover .close-keep-ads{visibility:visible;opacity:1;color:#ffe88b;transform:translate(0,0);}
#keep-ads p span{font-family:fontawesome;font-size:5rem;}
@keyframes wobble{0%{transform:scale(0) rotate(-54deg) translatey(40px);}45%{transform:scale(1.1) rotate(20deg) translatey(0px);}60%{transform:scale(1) rotate(-15deg) translatey(0px);}77%{transform:scale(1) rotate(10deg) translatey(0px);}100%{transform:translatey(0);}}
<script type='text/javascript'>Bước 3: Bạn dán đoạn code sau vào dưới thẻ <body> của blog
//<![CDATA[
// Notifikasi Adblocker Adsense
function hidekeep(){document.getElementById("keep-ads").style.display="none"}setTimeout(function(){var e=document.getElementById("keep-ads"),t=document.querySelectorAll("ins.adsbygoogle");0===$(t).height()&&(e.className="show")},2e3);
//]]>
</script>
<div id='keep-ads'>Chỉnh sửa:
<div class='keep-adsme'>
<p><h4>Adblock Detected</h4></p>
<p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>
<p>Hệ thống nhận thấy rằng bạn đang dùng plugin AdBlock Plus.</p>
<p>Để ủng hộ startruong bạn có thể tạm tắt plugin đó đối với website startruongit.net <a href='http://www.startruongit.net' target='_blank' title='Show me how'>hướng dẫn tắt</a> và lâu lâu hãy nhấp vào quảng cáo giúp chúng tớ nhé.</p>
<p>Thank You</p>
<div class='close-keep-ads' onclick='hidekeep()'>×</div>
</div>
</div>
- Bạn có thể sửa nội dung theo ý muốn.
- Thay http://www.startruongit.net thành địa chỉ trang hướng dẫn tắt Plugin đó (hiện tại mình chưa cập nhật trang hướng dẫn đó)
Comments
Post a Comment