Hiển thị thông báo khi người dùng chặn quảng cáo bằng Adblock hay Adguard cho website

0 Share Share Copy URL

Chào các bạn hôm nay mình xin chia sẻ đến các bạn một đoạn code nhỏ hiện thông báo khi người dùng, dùng tiện ích chặn quảng cáo.
Như các bạn đã biết quảng cáo là một phần không thể thiếu của 1 website rồi đúng không, nó giúp chúng ta những người viết blog có tiền để gia hạn tên miền,hosting và nâng cấp website...
Ok không lan man dài dòng nữa nhé chúng ta cùng vào chủ đề chính, khác với đoạn code loại bỏ adblock khi vào sẽ hiển thị toàn màn hình gây khó chịu cho người truy cập, đoạn code này sẽ hiển thị một lời nhắc nho nhỏ đến người dùng ở cạnh dưới website.

CÁCH LÀM: 
1. Các bạn chèn đoạn css sau đây vào trước thẻ ]]></b:skin>

#detect-adblock-zone{width:100%;z-index:99;position:fixed;bottom:0;}
#detect-adblock{background:#E23A3A;border-left:4px solid #8E0707;color:#fff;text-align:center;padding:10px 20px;position:relative;bottom:-150px;opacity:0;font-size:100%;line-height:1.5em;border-radius:5px;width:100%;max-width:1056px;height:auto;z-index:99;box-shadow:0 5px 15px rgba(0,0,0,0.5);margin:0 auto;}
#detect-adblock p{margin:0}
#detect-adblock.show{pointer-events:auto;opacity:1;bottom:0;}
.detect-adblock-note{text-decoration:underline;}
.detect-adblock-title{text-decoration:underline;font-weight:700;font-size:15px;animation-name:blinker;animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite;}
.close-detect-adblock:hover{color:#1C90F3;box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);transform:scale(1,1);}
#detect-adblock.show{animation:detect-adblock-anim ease-out 1s;animation-iteration-count:1;transform-origin:50% 50%;-webkit-animation:detect-adblock-anim ease-out 1s;-webkit-animation-iteration-count:1;-webkit-transform-origin:50% 50%;-moz-animation:detect-adblock-anim ease-out 1s;-moz-animation-iteration-count:1;-moz-transform-origin:50% 50%;-o-animation:detect-adblock-anim ease-out 1s;-o-animation-iteration-count:1;-o-transform-origin:50% 50%;-ms-animation:detect-adblock-anim ease-out 1s;-ms-animation-iteration-count:1;-ms-transform-origin:50% 50%}
.close-detect-adblock{background:#fff;color:#E23A3A;text-align:center;position:absolute;top:-15px;right:5%;font-size:24px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all 0.3s cubic-bezier(.25,.8,.25,1);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}
@keyframes detect-adblock-anim{0%{opacity:0.3;transform:translate(0px,80px)}100%{opacity:1;transform:translate(0px,0px)}}
@keyframes blinker{0%{opacity:1.0;}50%{opacity:0.0;}100%{opacity:1.0;}}
@media only screen and (max-width:640px){
#detect-adblock-zone,#detect-adblock,.close-detect-adblock{display:none;}}

2. Tìm đến thẻ </body>, copy 2 đoạn mã dưới đây vào trước thẻ đó.

HTML

<div id='detect-adblock-zone'><div id='detect-adblock'>
  <p><i class='fa fa-frown-o'/> <span class='detect-adblock-title'>Oops!! CÓ VẺ NHƯ BẠN ĐANG BẬT ADBLOCK</span> <i class='fa fa-frown-o'/></p>
  <p>Quảng cáo giúp QuangNinhBay.Com duy trì website và tiếp tục chia sẻ các thủ thuật đến bạn.</p>
  <p>Bạn vui lòng <span class='detect-adblock-note'>tắt Adblock</span> hoặc cho QuangNinhBay.Com vào <span class='detect-adblock-note'>danh sách trắng</span> trong công cụ chặn quảng cáo của bạn. Cảm ơn!</p>
<div class='close-detect-adblock' onclick='hidedetect()'>&#215;</div>
</div></div>

JAVASCRIPT

<script type='text/javascript'>
//<![CDATA[
setTimeout(function() {
  var info = document.getElementById("detect-adblock");
  var ads = document.querySelectorAll("ins.adsbygoogle");
  if ($(ads).height() === 0 ) {
    info.className = "show";
  }
}, 5000)
function hidedetect() {
  var e = document.getElementById("detect-adblock").style.display = "none";
};
//]]>
</script>

Vậy là  xong rồi đấy các bạn hãy bật adblock và test thử nhé.