Tất cả những gì bạn chia sẻ đều là miễn phí, tuy rằng bạn cũng cần traffic tức lưu lượng truy cập nhưng bạn cũng cần có thu nhập từ quảng cáo nhưng khách truy cập sử dụng trình duyệt có cài tiện ích mở rộng Adblock để chặn quảng cáo và dùng chùa blog của bạn thì quả là không mấy công bằng.
Nếu thực sự không cần khách truy cập dạng này thì bạn có thể cài code chặn người dùng sử dụng Adblock chặn quảng cáo. Tuy nhiên việc gì đều có mặt lợi và hại nên cần suy nghĩ kỹ trước khi sử dụng.
Để cài đặt code chặn người dùng sử dụng trình duyệt cài Adblock chặn quảng cáo cho blogspot/blogger bạn cần vào chỉnh sửa mẫu thêm CSS và Javascript. Bài viết này chia sẻ 3 kiểu xuất hiện thông báo với 3 code css tương ứng còn javascript là dùng chung cho cả 3 mẫu css.
3 mẫu CSS có thể sử dụng.
Mẫu 1/* Animation Adblock */
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
/* Adblock */
#arlinablock{background:rgba(20,20,20,0.50);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;animation:fadeInDown 1s}
#arlinablock .header{margin:0 0 15px 0}
#arlinablock .inner{background:#fff;color:#222;box-shadow:0 0 2rem -1rem rgba(0,0,0,0.5);text-align:center;width:100%;max-width:640px;padding:30px;margin:7% auto 2% auto;animation:fadeInDown 1s}
#arlinablock button{padding:10px 20px;border:0;background:#fff;color:#e74c3c;margin:20px 5px;cursor:pointer;border-radius:3px;font-size:13px;font-weight:600;border:2px solid #e74c3c;transition:initial}
#arlinablock button:hover{background:#2c3e50;color:#fff;outline:none;border-color:#2c3e50}
#arlinablock button.active,#arlinablock button:hover.active{background:#e74c3c;color:#fff;border-color:#e74c3c;outline:none}
#arlinablock .fixblock{background:#fff;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px}
#arlinablock .fixblock div{display:none}
#arlinablock .fixblock div.active{display:block}
#arlinablock ol{margin-left:20px}
@media(max-width:768px){#arlinablock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}
Mẫu 2
/* Animation Adblock */
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
/* Adblock */
#arlinablock{background:rgba(20,20,20,0.70);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;animation:fadeInDown 1s}
#arlinablock .header{margin:0 0 15px 0}
#arlinablock .inner{background:#e3482d;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;width:100%;max-width:640px;padding:30px;margin:7% auto 2% auto;animation:fadeInDown 1s}
#arlinablock button{padding:10px 20px;border:0;background:rgba(0,0,0,0.15);color:#fff;margin:20px 5px;cursor:pointer;transition:all .3s}
#arlinablock button:hover{background:rgba(0,0,0,0.35);color:#fff;outline:none}
#arlinablock button.active,#arlinablock button:hover.active{background:#fff;color:#222;outline:none}
#arlinablock .fixblock{background:#fff;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px}
#arlinablock .fixblock div{display:none}
#arlinablock .fixblock div.active{display:block}
#arlinablock ol{margin-left:20px}
@media(max-width:768px){#arlinablock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}
Mẫu 3
/* Animation Adblock */
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scale3d(1,1,1)}}
/* Adblock */
#arlinablock{background:rgba(0,0,0,0.65);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;animation:fadeInDown 1s}
#arlinablock .header{margin:0 0 15px 0}
#arlinablock .inner{background:#e3482d;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;width:600px;padding:40px;border-radius:5px;margin:7% auto 2% auto;animation:rubberBand 1s}
#arlinablock button{padding:10px 20px;border:0;background:rgba(0,0,0,0.15);color:#fff;margin:20px 5px;cursor:pointer;transition:all .3s}
#arlinablock button:hover{background:rgba(0,0,0,0.35);color:#fff;outline:none}
#arlinablock button.active,#arlinablock button:hover.active{background:#fff;color:#222;outline:none}
#arlinablock .fixblock{background:#fff;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px}
#arlinablock .fixblock div{display:none}
#arlinablock .fixblock div.active{display:block}
#arlinablock ol{margin-left:20px}
@media(max-width:768px){#arlinablock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}
Javascript
Phần link javascript này đã được đặt trong mã javascript chỉ tải khi cuộn trang để không làm chậm tốc độ load trang. Bạn dán trước thẻ </body> và nên tải về up lên host riêng tránh dùng chung.<script>/*<![CDATA[*/
// Say Hi to Adblock
window.addEventListener("load",function(){function a(){if(0==b){b=1;var a=document.createElement("script");a.async=!0,a.src="https://raw.githack.com/dtbvoz/nz/main/tbadblock.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(a,c)}}var b=0;window.addEventListener("scroll",function(){a()})});
/*]]>*/</script>