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.

Xem thêm: Tự động xoá SPAM link trong nội dung comment Blogger

Đố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é 😝

XEM DEMO

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 */
#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);}}

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ẻ đó:

<script type='text/javascript'>
//<![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>

Bước 3: Bạn dán đoạn code sau vào dưới thẻ <body> của blog

<div id='keep-ads'>
<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()'>&#215;</div>
</div>
</div>

Chỉnh sửa:
- 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 đó)
Tips: Nếu bạn không muốn Popup này xuất hiện khi truy cập trang web bằng các thiết bị di động, điện thoại mình minh và các trang tĩnh bạn có thể đặt code trong các cặp thẻ điều kiện.
Ví dụ:

<b:if cond='data:blog.isMobileRequest != &quot;false&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div id='keep-ads'>
<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()'>&#215;</div>
</div>
</div>
</b:if>
</b:if>

Ở trên mình đã sử dụng thẻ điều kiện không cho hiện ở điện thoại và các trang tĩnh
<b:if cond='data:blog.isMobileRequest != "false"'>
<b:if cond='data:blog.pageType != "static_page"'>
Ngoài thẻ trên bạn có thể thay thế bằng các thẻ khác (các thẻ điều kiện cho blogspot), cuối cùng là lưu mẫu lại.
Chúc bạn thành công!

Nguồn: Arlinadzgn

Popup hiển thị thông báo khi phát hiện trình duyệt sử dụng Plugin Adblocker

Hướng dẫn cách làm:

Tiêu điểm