Trong bài viết lần này, mình sẽ đề cập đến một loại mã dùng để chống lại tiện ích chống adblock. Vì một số lý do, có thể khiến blog, website của bản thân bị mất doanh thu để duy trì được website. Cũng khuyến khích các bạn không nên sử dụng quảng cáo popup vì nhu cầu khách hàng sử dụng, nếu như thế họ không cần phải dùng tiện ích adblock.

Vậy nên, vấn đề chính hôm nay là mình sẽ chia sẻ một loại mã chống lại tiện ích chống adblock cho Blogspot. Giao diện đẹp, thân thiện với khách hàng.

Style Chống ADBLOCK 1

Anti Adblock - Thêm Mã Phát Hiện Và Chặn Người Dùng Sử Dụng Adblock

Style Chống ADBLOCK 2

Hướng Dẫn Cài Đặt

Bước 1: Bạn thêm đoạn css bên dưới vào ]]></b:skin tùy bạn lựa chọn style 1 hoặc style 2
Style Chống ADBLOCK 1

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

Style Chống ADBLOCK 2

/* 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;margin:auto;top:30%;left:0;right:0;font-size:1.2rem;line-height:1.5;max-width:930px;box-shadow:0 0 50px rgba(0,0,0,0.25);transition:all .6s cubic-bezier(.25,.8,.25,1);overflow:hidden}

.keep-adsme:hover{box-shadow:0 0 20px rgba(0,0,0,0.15);}

.keep-adsme h4{background:#d04537;color:#fff;padding:15px 25px;font-size:2.2rem;margin:0 auto;border-bottom:1px solid rgba(0,0,0,0.1);}

.keep-me{border-top:1px solid rgba(255,255,255,0.1);padding:10px 30px 50px 30px}

#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:32px;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: Thêm đoạn css này vào trước </body> ( hỗ trợ trên mobile )

<b:if cond='data:blog.isMobileRequest == "true"'>

<style type='text/css'>

.keep-adsme{top:0;padding:15px;border:0;font-size:1.1rem;opacity:.99;bottom:0;font-family:arial;}

.keep-adsme h4{background:transparent;font-size:1.5rem;margin:40px auto 0 auto;}

.close-keep-ads{text-align:center;visibility:visible;opacity:1;color:#fff;bottom:20px;right:20px;padding:0;font-size:32px;width:38px;height:38px;line-height:32px;border-radius:100%;border:2px solid #fff;transform:translate(0,0);}

.close-keep-ads:hover,.keep-adsme:hover .close-keep-ads{background:#fff;color:#e74c3c;}

</style>

</b:if>

Bước 3: Thêm đoạn script này trước </body>

<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 4: Thêm một trong 2 đoạn html bên dưới vào trong <body></body> tùy bạn lựa chọn nhựng css tương ứng phía trên.
HTML 1

<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>Like this blog? Keep us running by whitelisting this blog in your ad blocker</p>

<p>This is <a href='https://www.howktech.com' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>

<p>Thank you</p>

<div class='close-keep-ads' onclick='hidekeep()'>×</div>

</div>

</div>

HTML 2

<div id='keep-ads'>

<div class='keep-adsme'>

<p><h4>Adblock Detected</h4></p>

<div class='keep-me'>

<p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>

<p>Like this blog? Keep us running by whitelisting this blog in your ad blocker</p>

<p>This is <a href='https://www.howktech.com' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>

<p>Thank you</p>

</div>

<div class='close-keep-ads' onclick='hidekeep()'>×</div>

</div>

</div>

Ở đây tôi thêm biểu tượng fontawesome và chắc chắn rằng trong blog của tôi đã thêm vào thư viện css fontawesome. Nếu không, bạn có thể xóa mã được đánh dấu.

Chỉnh sửa mã được đánh dấu thay thế liên kết bằng url đích. Ví dụ về các bài đăng trong liên kết tôi nhận được từ blog của howktech.

Nếu bạn muốn ẩn mã trên khỏi điện thoại thông minh và các trang tĩnh của mình, bạn có thể bọc mã bằng các thẻ có điều kiện như ví dụ bên dưới.

Đảm bảo không sử dụng theo cách này nếu bạn muốn hiển thị thông báo trên điện thoại thông minh của mình.

<b:if cond='data:blog.isMobileRequest == "false"'>

<b:if cond='data:blog.pageType != "static_page"'>

<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>Like this blog? Keep us running by whitelisting this blog in your ad blocker</p>

<p>This is <a href='https://www.howktech.com target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>

<p>Thank you</p>

<div class='close-keep-ads' onclick='hidekeep()'>×</div>

</div>

</div>

</b:if>

</b:if>

Làm thế nào để ẩn nội dung Blog Nếu Javascript bị vô hiệu hóa?

Một số người hiểu biết, có thể dùng f12 và tra ra script chống Adblock của Blog, website bạn và xóa nó đi, khiến chúng ta bị vô hiệu hóa mã script chống tiện ích chống Adblock. Vì vậy mình sẽ cung cấp thêm một đoạn code nhỏ bên dưới để ngăn chặn điều đó sảy ra với website, blog của các bạn.

Hướng Dẫn Cài Đặt

Bước 1: Hãy thêm đoạn mã script bên dưới vào trước </head>

<noscript>

<style type='text/css'>

/* No Script */

body,html{overflow:hidden}

.noscript{background:#e74c3c;color:#fff;padding:8% 0 0 0;position:fixed;bottom:0;left:0;top:0;right:0;z-index:1000;height:auto;-webkit-transform:translateZ(0);transform:translateZ(0);overflow:hidden}

.noscript p{margin:0;text-align:center;padding:0 20px 10px 20px;margin:auto;font-size:3rem;line-height:1.5;font-family:monospace;max-width:1010px;text-transform:uppercase;font-weight:700}

.noscript p span{color:#ffe88b;font-size:10rem;line-height:normal;font-weight:normal}

</style>

</noscript>

Bước 2: Các bạn thêm đoạn mã bên dưới vào bất cứ nơi nào trong <body>

<noscript>

<div class='noscript'>

<p><span>⚠</span></p>

<p>Please Enable Javascript to view our site content</p>

<p>Thank you</p>

</div>

</noscript>

Như thế là hoàn thành hết tất cả các bước, hoàn thành tạo thông báo chống sử dụng Adblock của người dùng cho blog, website của các bạn.