Code note thông báo khi người dùng bật ADBlock cho web xenforo

Code note tạo thông báo khi người dùng sử dụng code note disable adblock để chặn quảng cáo khi xem web dùng cho xenforo và các mã nguồn web khác như wordpress hay blog.

Quảng cáo là một sự trả công cho ngừoi phát triển nội dung trên internet. Tuy nhiên, nhiều trang web hay ứng dụng chèn quảng cáo quá nhiều dẫn đến ức chế cho người đọc web trong đó có Tôi! Admin của 1doi1.com.

Vì vậy nhiều người đã cài adblock như một cách chặn quảng cáo khi lướt web. Vì vậy, vô tình làm mất đi "sự trả công cho người sáng tạo nội dung tốt".

Có một sự thật, nhiều trang web đặt code quảng cáo rất ít vì họ hiểu và tôn trọng bạn, khi bạn lướt web. Nhưng nếu bạn bật adblock thì vô tình đưa họ vào "danh sách đen". Mình thấy thật tội cho họ.

Vào vấn đề chính, vì mình cũng là người làm web để phục vụ cộng đồng FREE khi không bắt buộc thu phí thành viên.

Nên cũng xin chèn code thông báo nhắc nhỡ người dùng code yêu cầu tắt adblock để giúp mình có thêm kinh phí phát triển web bền vững.

Đoạn code như sau:

Mã:

<!-- Bat Dau - code thong bao adblock -->
<style>
#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;}}
</style>
<div id='detect-adblock-zone'><div id='detect-adblock'>
  <p>CÓ VẺ NHƯ BẠN ĐANG BẬT ADBLOCK</p>
  <p>Tôi hiểu và thông cảm với Bạn khi bị "ÁM ẢNH" vì Quảng Cáo quá nhiều khi lướt Web. Vì vậy, chúng tôi chèn quảng cáo rất ít để không làm phiền bạn.</p>
  <p>Tôi rất biết ơn vì bạn truy cập website. Thật tốt khi Bạn có thể giúp Tôi, bằng cách tắt Adblock hoặc chọn "Don't run on pages on this site".</p>
  <p>Làm ơn, vì Quảng Cáo là KINH PHÍ duy nhất để website còn hoạt động. Cảm ơn bạn vô cùng <3</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>
<!-- end code thong bao adblock -->

Code dùng được cho mọi mã nguồn web nhé. Với xenforo thì chèn PAGE_CONTAINER phía trước thẻ </body></html>.

Nó sẽ chạy một thông báo nhỏ phía dưới như thế này:



Mình khuyên các bạn chỉ nền chèn thông báo dạng thế này nếu là admin của website. Vì nó ít gây ức chế so với code thông báo giữa màn hình hoặc toàn màn hình.

Vì code toàn màn hình dễ làm khách tham quan web của bạn bỏ đi vì khó chiệu chẳng khác gì đang xem quảng cáo.

Một lời cuối, ae làm web nên chèn ít quảng cáo thôi, vì chèn nhiều quá là không tôn trọng người xem web. Xin hết.