Chia sẻ code thông báo khi Adblock chặn quảng cáo website của bạn
Như bạn đã biết thì đối với các webmaster việc thu nhập từ quảng cáo giúp duy trình, có kinh phí để gia hạn để tiếp tục phát triển website. Quảng cáo mang lại thu nhập nhất định, tuy nhiên hiện nay chúng ta có thể thấy có rất nhiều các tiện ích chặn quảng cáo tích hợp trên trình duyệt giúp người dùng có thể bỏ qua được hiển thị của các quảng cáo như Adblock, Adguard, AdRemover, Ghostery, Simply Block Ads!, SuperBlock AdBlocker,...
Việc này rất ảnh hưởng tới các nhà phát triển website việc thu nhập của họ giảm xuống, không có kinh phí duy trì. Vậy nên trong bài viết này mình sẽ hướng dẫn các bạn tích hợp tiện ích khi người dùng bật các tiện ích chặn quảng cáo trên website của bạn thì sẽ hiện bảng thông báo chặn hiển thị nội dung và buộc người dùng tắt để xem tiếp.
Tuy nhiên mình rất ủng hộ việc này, nhưng các bạn hạn chế hiển thị quảng cáo hay các loại quảng cáo dạng popup để nâng cao được mức hiển thị nội dung bài viết tới bạn đọc. Việc này sẽ mang lại cảm tình người đọc cho website của bạn hơn.
Dưới đây là hình của dạng thông báo dành cho người dùng sử dụng blogger/blogspot.
Hướng dẫn cách làm:
Cách 1: Áp dụng cho blogspotBước 1: Bạn truy cập vào trang quản trị blogspot -> chủ đề -> chỉnh sử HTML
Bước 2: Sử dụng CSS sau dán lên phía trên ]]></b:skin
/* Adblock Popup */
#keep-ads{background:rgba(0, 0, 0, .7);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:#1F1F1F;color:#fff;position:absolute;text-align:center;padding:15px 40px 30px;margin:auto;top:25%;left:0;right:0;font-size:1.5rem;line-height:1.5;max-width:720px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);transition:all .6s cubic-bezier(.25,.8,.25,1);overflow:hidden;border-radius: 10px;}
.keep-adsme h4{display:inline-block;padding:0;font-size:22px;margin:0 auto;color: #fe4335;}
#keep-ads p{margin:0;font-size: 15px;line-height: 24px;}
#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:100px;color: #fe4335;font-weight: 700;line-height: normal;}
@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)}}
Bước 2: Dán toàn bộ code sau lên phía trên thẻ đóng </body>
<!-- Adblock -->
<script class='java' type='text/javascript'>
//<![CDATA[
// Adblock Popup
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'>
<div class='keep-adsme'>
<p><span><i aria-hidden='true' class='fa fa-frown-o'></i></span></p>
<h4>BẠN ĐANG BẬT ADBLOCK!</h4>
<p>Nếu bạn thích blog hãy tắt tiện ích chặn quảng cáo để ủng hộ chúng tôi nhé. Xin cảm ơn.</p>
<p>Cách tắt:
<a href='https://i.imgur.com/G55F9eC.png' target='_blank'>Adblock trên Chrome</a> |
<a href='https://i.imgur.com/L787Kqe.png' target='_blank'>Adblock Plus trên Chrome</a> |
<a href='https://i.imgur.com/D1B9MHC.png' target='_blank'>Adblock trên Firefox</a>
</p>
<p><a href='javascript:window.location.reload();'>TẢI LẠI TRANG</a></p>
</div>
</div>
Cuối cùng là lưu mẫu lại. Cách 2: Áp dụng cho blogspot và mã nguồn web khác
Với cách này khá đơn giản bạn chỉ cần copy đoạn JS sau và dán chức năng của nó cũng tương tự
<script src='//rawgit.com/blogchiasethuthuatcom/adblock/master/adblock.js'></script>Các bạn sử dụng blogspot nếu không muốn can thiệp nhiều tới code thì cũng có thể sử dụng trực tiếp cách 2 này.
Tổng kết:
Trên đây mình đã chia sẻ tới các bạn 2 cách để chống lại khi người dùng truy cập sử dụng các tiện ích chặn quảng cáo để giúp bạn có thêm nguồn thu nhập.Nếu thấy bài viết hay thì chia sẻ tới mọi người cùng biết nhé!!!
huhu
