Như các bạn đã biết, những trình chặn quảng cáo (Adblock) tuy tiện lợi cho người dùng, nhưng lại có thể khiến website của bạn mất đi một nguồn thu nhập quan trọng. Khi Adblock được kích hoạt, quảng cáo sẽ bị ẩn đi, khiến website gần như “im hơi lặng tiếng” và khó có kinh phí quảng cáo để duy trì hoạt động.
Nhưng đừng vội lo lắng! Giờ đây, bạn có thể “đánh thức” website của mình với một giải pháp đơn giản mà hiệu quả. Đó chính là sử dụng đoạn code đặc biệt, giúp bạn phát hiện Adblock và nhẹ nhàng nhắc nhở người dùng tắt tính năng này để ủng hộ website. Hãy cùng follow các bước trong bài viết này của Shian nhé!
Các bước thực hiện
Bước 1: Truy cập vào mã nguồn website
Trước tiên, bạn cần truy cập vào mã nguồn HTML của website. Cách thực hiện có thể khác nhau tùy thuộc vào nền tảng bạn đang sử dụng (WordPress, Wix, Blogger,…). Thông thường, bạn sẽ cần đăng nhập vào trang quản trị website, tìm đến phần chỉnh sửa theme hoặc mã nguồn, nhớ chuyển sang chế độ chỉnh sửa HTML nếu có nhé.
Bước 2: Chèn code HTML
Cuộn xuống cuối file (ngay trước thẻ đóng </body>) và dán đoạn code HTML sau:
<div class='ADs-BG center hidden' id='ST1mar'>
<div class='at-adblock-content-wrapper'>
<div class='at-adblock-content'>
<div class='center'>
<div class='logo'>
<svg style='width:58px;height:58px' viewBox='0 0 24 24'>
<path d='M8.27,3L3,8.27V15.73L8.27,21H15.73C17.5,19.24 21,15.73 21,15.73V8.27L15.73,3M9.1,5H14.9L19,9.1V14.9L14.9,19H9.1L5,14.9V9.1M11,15H13V17H11V15M11,7H13V13H11V7' fill='#b23939'/>
</svg>
</div>
</div>
<div class='at-adblock-text'>
<h3>
Attention! Ad blocker Detected!
</h3>
<p>
We know ads are annoying but please bear with us here & disable your ad blocker!
</p>
</div>
<div class='at-adblock-button'>
<button class='ad-btn'>
Okay
</button>
</div>
</div>
</div>
</div>Bước 3: Chèn code CSS
Trong cùng file, tìm đến phần <head> (thường ở đầu file), hãy thêm đoạn code CSS sau vào ngay bên dưới nó:
<style>
.hidden{display:none!important;}
.center { height: 100%; padding: 0; margin: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .ADs-BG{ background: rgba(255, 255, 255, 0.58); width: 100vw; height: 100vh; position: fixed; z-index: 99999; top: 0; left: 0; } .at-adblock-content-wrapper { box-shadow: 24px 24px 48px rgba(0, 0, 0, 0.4); border-radius: 10px; max-width: 400px; background: #fff; height: auto; width: 100%; } .at-adblock-content { padding: 30px 50px; } .at-adblock-text, .at-adblock-text h3 { text-align: center; font-family: inherit; font-weight: 700; } .at-adblock-text h3 { font-size: 25px; margin-top: 1rem; } .at-adblock-text p { margin: 20px auto; font-weight: 500;font-size: 13px; } .at-adblock-button .ad-btn { line-height: 1em; border-radius: 30px; border: none; border:2px solid #b23939; padding: 10px 20px; width: 100%; background: #b23939; color: #fff; transition: 0.2s; } .at-adblock-button .ad-btn:hover { background: #fff; color: #b23939; border: 2px solid #b23939; } @media (max-width:480px){ .at-adblock-content-wrapper{max-width:300px}.at-adblock-text h3{font-size:20px}.at-adblock-text p{font-size:12px}.at-adblock-button .ad-btn{font-size:12px} }
</style>Bước 4: Chèn code JavaScript
Dán đoạn code JavaScript sau vào cuối file, ngay sau đoạn code HTML bạn vừa chèn ở Bước 2.
<script src='data:text/javascript;base64,ZnVuY3Rpb24gaW5pdCgpe2Fkc0Jsb2NrZWQoZnVuY3Rpb24obyl7bz8oJCgiI1NUMW1hciIpLnJlbW92ZUNsYXNzKCJoaWRkZW4iKSwkKCIuYXQtYWRibG9jay13cmFwcGVyIikuYWRkQ2xhc3MoImZhZGVJbiIpKTpjb25zb2xlLmxvZygiQWQtYmxvY2tlciBFbmFibGVkIDogIitvKX0pfWZ1bmN0aW9uIGFkc0Jsb2NrZWQobyl7dmFyIG49bmV3IFJlcXVlc3QoImh0dHBzOi8vcGFnZWFkMi5nb29nbGVzeW5kaWNhdGlvbi5jb20vcGFnZWFkL2pzL2Fkc2J5Z29vZ2xlLmpzIix7bWV0aG9kOiJIRUFEIixtb2RlOiJuby1jb3JzIn0pO2ZldGNoKG4pLnRoZW4oZnVuY3Rpb24obyl7cmV0dXJuIG99KS50aGVuKGZ1bmN0aW9uKG4pe2NvbnNvbGUubG9nKG4pLG8oITEpfSkuY2F0Y2goZnVuY3Rpb24obil7Y29uc29sZS5sb2cobiksbyghMCl9KX1zZXRUaW1lb3V0KCgpPT57aW5pdCgpfSwwKSwkKCIuYWQtYnRuIikuY2xpY2soZnVuY3Rpb24oKXtsb2NhdGlvbi5yZWxvYWQoKX0pOw== '/>Bước 5: Lưu thay đổi
Lưu lại những thay đổi bạn đã thực hiện trên file.
Bước 6: Kiểm tra kết quả
Mở website của bạn trong trình duyệt (có bật Adblock) để kiểm tra xem thông báo đã hiển thị đúng chưa
Tuỳ chỉnh cá nhân hoá
Bạn hoàn toàn có thẻ thay đổi nội dung, màu sắc, hoặc hình ảnh trong thông báo chống Adblock theo ý muốn. Sau đây mình sẽ hướng dẫn qua cho những bạn chưa rảnh về code nhé:
1. Thay đổi nội dung:
Tiêu đề: Tìm đến dòng <h3>Attention! Ad blocker Detected!</h3> trong code HTML và thay đổi nội dung giữa cặp thẻ <h3> </h3>. Ví dụ:
<h3> Rất tiếc, Adblock đang được bật! </h3>
Nội dung: Tìm đến dòng <p>We know ads are annoying... </p> và thay đổi nội dung tương tự. Ví dụ:
<p> Quảng cáo giúp chúng tôi duy trì website. Vui lòng tắt Adblock để ủng hộ nhé! </p>
Nút bấm: Tìm đến dòng <button class='ad-btn'>Okay</button> và thay đổi nội dung giữa cặp thẻ <button> </button>. Ví dụ:
<button class='ad-btn'> Tôi đã tắt Adblock </button>
2. Thay đổi màu sắc:
Màu nền: Tìm đến phần code CSS và thay đổi giá trị background của .ADs-BG để thay đổi màu nền của thông báo. Ví dụ:
.ADs-BG {
background: rgba(0, 0, 0, 0.7); /* Nền đen mờ */
}
Màu chữ: Thay đổi giá trị color của .at-adblock-text để thay đổi màu chữ.
Màu nút bấm: Thay đổi giá trị background và color của .ad-btn để thay đổi màu nút bấm.
3. Thay đổi hình ảnh:
- Tìm đến dòng
<svg ... >trong code HTML. Đây là đoạn code tạo ra biểu tượng cảnh báo. - Bạn có thể thay thế bằng hình ảnh khác bằng cách sử dụng thẻ
<img>và chỉ định đường dẫn đến hình ảnh của bạn. Ví dụ:
<img src="https://example.com/logo.png" alt="Logo">
Lưu ý:
- Hãy cẩn thận khi chỉnh sửa code, đảm bảo bạn hiểu rõ chức năng của từng phần.
- Sau khi chỉnh sửa, nhớ lưu lại thay đổi và kiểm tra kết quả trên website nhé!.
Chúc các bạn thành công!
