Khung thông báo Phát hiện AdBlock khi người dùng sử dụng tiện ích chặn quảng cáo ~ Iris Tips

Khung thông báo Phát hiện AdBlock khi người dùng sử dụng tiện ích chặn quảng cáo

Adblock Detect Notification

Đây là đoạn code dành cho các Publisher, khi người dùng sử dụng tiện ích chặn quảng cáo trên website sẽ hiển thị một bảng thông báo nhắc nhở người dùng tắt AdBlock.

Khác với đoạn code Loại bỏ Adblock khi vào xem website cho Blogger hiển thị toàn màn hình và gây khó chịu cho người sử dụng, đoạn code này sẽ chỉ hiện một khung thông báo nhắc nhở nhỏ ở cạnh dưới website và người dùng có thể dễ dàng tắt đi khung thông báo đó.

DEMO

Cách thực hiện

1Vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS 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;}}

2Tìm đến thẻ </body>, đặt đoạn HTML và JS sau đây vào trước thẻ đó.

<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 Iris Tips duy trì website và tiếp tục chia sẻ các thủ thuật đến bạn.</p>
  <p>Thích Iris Tips? Vui lòng <span class='detect-adblock-note'>tắt Adblock</span> hoặc cho Iris Tips 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>

<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>

3Vậy là xong rồi đấy, bạn hãy bật AdBlock và kiểm tra thử nhé.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips