Kamu mungkin pernah mengalami — trafik blog tinggi, tapi pendapatan iklan di AdSense tetap kecil. Padahal iklan sudah dipasang di semua halaman. Nah, kemungkinan besar penyebabnya adalah pengunjung menggunakan AdBlocker.
AdBlock memang membantu pembaca menghindari iklan yang mengganggu, tapi di sisi lain, itu juga bisa mematikan sumber penghasilan blogger.
Kalau kamu ingin tetap menjaga agar iklan tetap tampil dan pengunjung tahu pentingnya dukungan mereka, kamu bisa menambahkan fitur anti AdBlock di blog kamu.
Artikel ini akan membahas cara memasang script anti AdBlock di Blogspot, lengkap dengan contoh kode dan langkah penempatannya.
Apa Itu Anti AdBlock?
Anti AdBlock adalah script atau sistem kecil yang bertugas mendeteksi apakah pengunjung menggunakan pemblokir iklan, seperti uBlock Origin, AdBlock Plus, atau Brave Shield.
Begitu terdeteksi, script akan menampilkan peringatan (popup) yang meminta pengunjung untuk:
-
menonaktifkan AdBlock,
-
atau menambahkan blog kamu ke daftar pengecualian (whitelist).
Dengan begitu, kamu bisa tetap menjaga agar blogmu mendapat penghasilan dari iklan tanpa kehilangan pembaca.
Cara Memasang Script Anti AdBlock di Blogspot
Berikut ini langkah-langkah lengkap untuk menambahkan script anti AdBlock ke blog kamu.
1️⃣ Masuk ke Dashboard Blogspot
Masuk ke Blogger.com, lalu pilih blog yang ingin kamu pasangi fitur anti AdBlock.
2️⃣ Buka Menu “Tema”
Setelah itu:
-
Klik Tema di sidebar kiri.
-
Lalu klik tanda ▼ di tombol “Sesuaikan” dan pilih Edit HTML.
3️⃣ Tempelkan Script Anti AdBlock
Gulir ke bagian paling bawah kode HTML tema, lalu letakkan script berikut tepat di atas tag </body>.
<script>
(function () {
function detectAdBlock() {
return new Promise((resolve) => {
let bait = document.createElement("div");
bait.className = "adsbox ad-banner ad-unit"; // Common blocked ad-related class names
bait.style.width = "1px";
bait.style.height = "1px";
bait.style.position = "absolute";
bait.style.left = "-9999px";
bait.style.visibility = "hidden"; // Make it harder to detect by AdBlock itself
document.body.appendChild(bait);
setTimeout(() => {
let isBlocked = !bait || bait.offsetParent === null || window.getComputedStyle(bait).display === "none";
document.body.removeChild(bait);
resolve(isBlocked);
}, 100); // Reduced timeout for better performance
});
}
function showAdblockPopup() {
let overlay = document.createElement("div");
overlay.id = "adblock-overlay";
overlay.style.position = "fixed";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.width = "100%";
overlay.style.height = "100%";
overlay.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
overlay.style.display = "flex";
overlay.style.justifyContent = "center";
overlay.style.alignItems = "center";
overlay.style.zIndex = "9999";
overlay.innerHTML = `
<div style='display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; max-width: 500px; border-radius: 10px; margin: 20px; min-height: 250px; font-size: 1.2em; font-family: system-ui; border: 5px solid #b3b3b3; background: #ffffff; color: black;'>
<h2 style='margin: 0px 0px 15px; font-weight: 700;'>AdBlocker Detected!</h2>
<p>Kami mengandalkan iklan untuk menjaga situs <strong>mukhlismj.com</strong> tetap gratis. Mohon nonaktifkan pemblokir iklan Anda.</p>
<button id='refresh-page' style='padding: 10px 20px; font-size: 16px; cursor: pointer; background: #1a73e8; color: white; border-radius: 10px; margin: 15px 0px 0px;'>I Disabled AdBlock</button>
</div>
`;
document.body.appendChild(overlay);
document.getElementById("refresh-page").addEventListener("click", function () {
location.reload();
});
}
window.addEventListener("load", () => {
detectAdBlock().then((adBlockDetected) => {
if (adBlockDetected) {
showAdblockPopup();
}
});
});
})();
</script>
4️⃣ Simpan Tema
Setelah menempelkan script di atas, klik tombol “Simpan” di pojok kanan atas.
5️⃣ Uji Coba di Browser
Sekarang, coba buka blog kamu menggunakan browser dengan AdBlock aktif.
Jika script berhasil, maka akan muncul popup peringatan yang meminta pengunjung mematikan pemblokir iklan sebelum melanjutkan.
Cara Mengubah Pesan Peringatan
Kalau kamu ingin menyesuaikan teksnya agar lebih cocok dengan gaya blog kamu, ubah bagian ini:
<p>Kami mengandalkan iklan untuk menjaga situs mukhlismj.com tetap gratis. Mohon nonaktifkan pemblokir iklan Anda.</p>
Kamu bisa ubah misalnya jadi versi santai seperti:
Halo! Kami butuh dukunganmu supaya mukhlismj.com tetap bisa gratis. Tolong matikan ad blocker kamu, ya!
Atau versi singkat:
Tolong nonaktifkan ad blocker agar konten tetap gratis. Terima kasih atas dukungannya!
Tips Tambahan
-
Gunakan popup yang sopan dan tidak agresif. Jangan sampai pengunjung merasa dipaksa.
-
Uji di beberapa browser, karena beberapa AdBlocker lebih ketat dari yang lain.
-
Gunakan desain popup yang sesuai tema blog agar tetap terlihat profesional.
-
Kalau kamu ingin tampil lebih interaktif, kamu bisa tambahkan animasi CSS atau ikon lucu di popup tersebut.
Kenapa Fitur Ini Penting?
Dengan adanya anti AdBlock, kamu bisa:
-
Meminimalkan kehilangan pendapatan iklan,
-
Menyampaikan pesan edukatif ke pembaca,
-
Menjaga agar usaha menulis dan membuat konten tetap dihargai.
Ingat, kamu tidak sedang memaksa mereka menonton iklan, kamu hanya meminta sedikit dukungan agar blogmu tetap hidup.
Jadi..
Memasang script anti AdBlock di Blogspot adalah cara sederhana namun efektif untuk melindungi pendapatan iklan.
Dengan hanya menambahkan sedikit kode di atas </body>, kamu bisa memastikan setiap pengunjung sadar bahwa iklan bukan musuh, tapi bentuk dukungan kecil untuk kreator seperti kamu.
