Cara Memasang Script Anti-AdBlock di Blog atau Website (Tutorial Lengkap + Penjelasan Kode)

Semakin banyak pengguna internet memakai AdBlock, uBlock Origin, AdGuard, dan pemblokir iklan lainnya. Untuk pembaca mungkin ini terasa nyaman, tapi untuk pemilik blog — terutama yang mengandalkan iklan seperti Google AdSense — ini tentu merugikan.

Solusinya yaitu dengan Anti-AdBlock Script, yaitu kode yang dapat mendeteksi apakah pengunjung memakai pemblokir iklan dan menampilkan pesan atau pop-up sebelum mereka bisa melanjutkan membaca.

Pada artikel ini saya membagikan dua script Anti-AdBlock:

• Script Versi 1 → cocok untuk blog & website umum dengan timer/tombol.
• Script Versi Final → versi yang saya gunakan di blog saya sendiri (lebih modern, stabil, ringan, anti-error).

Sebelum digunakan, Anda bisa mengetes script ini di W3Schools TryIt Editor agar tahu hasil tampilannya sebelum dipasang ke blog.

---

📌 Script Anti-AdBlock Versi 1 (Untuk Blog dan Website)

Anda bisa menggunakan script ini untuk Blogspot, WordPress, PHP, atau website HTML murni.

Script ini menampilkan pop-up dengan hitungan mundur sebelum tombol aktif.

Silakan copy script di bawah tanpa mengubah baris apapun:

<!-- STABLE INLINE ANTI-ADBLOCK FOR BLOGSPOT -->
<style>
#adblock-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.95);
  color:#fff;
  z-index:2147483647;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'Segoe UI', Arial, sans-serif;
  padding:20px;
}
#adblock-overlay .box {
  max-width:500px;
  background:#1a1a1a;
  padding:30px 25px;
  border-radius:12px;
  border:2px solid #ff3b3b;
  box-shadow:0 0 20px rgba(255,59,59,0.5);
}
#adblock-overlay h2 { font-size:24px; margin-bottom:15px; color:#ff4747; }
#adblock-overlay p { font-size:16px; line-height:1.5; margin-bottom:15px; color:#ddd; }
#adblock-overlay #adblock-timer { font-size:20px; font-weight:bold; color:#ff5a5a; margin-bottom:15px; }
#adblock-overlay button {
  margin-top:10px;
  background:#ff3b3b;
  color:#fff;
  border:none;
  padding:12px 22px;
  border-radius:8px;
  font-size:16px;
  cursor:not-allowed;
  opacity:0.5;
  transition:0.3s;
}
#adblock-overlay button.enabled {
  cursor:pointer;
  opacity:1;
  box-shadow:0 0 12px rgba(255,59,59,0.6);
}
#adblock-overlay button.enabled:hover {
  transform:scale(1.05);
}
</style>

<div id="adblock-overlay">
  <div class="box">
    <h2>⚠ AdBlocker Terdeteksi</h2>
    <p>Silakan nonaktifkan AdBlock / AdGuard / uBlock untuk melanjutkan membaca.</p>
    <p id="adblock-timer">10</p>
    <button id="adblock-btn">Menunggu...</button>
  </div>
</div>

<script type="text/javascript">
//<![CDATA[
(function(){
  var overlay = document.getElementById('adblock-overlay');
  var btn = document.getElementById('adblock-btn');
  var timerEl = document.getElementById('adblock-timer');
  var counter = 10;
  btn.disabled = true;

  // Inline bait div
  var bait = document.createElement('div');
  bait.className = 'adsbox';
  bait.style.cssText = 'width:1px;height:1px;position:absolute;left:-9999px;top:-9999px;';
  document.body.appendChild(bait);

  function isBlocked(){
    var cs = window.getComputedStyle(bait);
    return (cs.display === 'none' || cs.visibility === 'hidden' || bait.offsetHeight === 0 || bait.offsetParent === null);
  }

  function showOverlay(){
    overlay.style.display = 'flex';
    document.documentElement.style.overflow = 'hidden';
    document.body.style.overflow = 'hidden';

    var interval = setInterval(function(){
      counter--;
      timerEl.textContent = counter;
      if(counter <= 0){
        clearInterval(interval);
        btn.textContent = 'Saya Sudah Mematikannya';
        btn.disabled = false;
        btn.classList.add('enabled');
      }
    },1000);

    btn.onclick = function(){
      if(isBlocked()){
        alert('AdBlock masih aktif! Matikan dulu sebelum lanjut.');
      } else {
        overlay.remove();
        document.documentElement.style.overflow = '';
        document.body.style.overflow = '';
      }
    };

    // Auto hide overlay jika user menonaktifkan AdBlock
    var checkInterval = setInterval(function(){
      if(!isBlocked()){
        clearInterval(checkInterval);
        overlay.remove();
        document.documentElement.style.overflow = '';
        document.body.style.overflow = '';
      }
    },500);
  }

  setTimeout(function(){
    if(isBlocked()){
      showOverlay();
    }
    try{ bait.remove(); }catch(e){}
  },500);

})();
//]]>
</script>

Penjelasan Bagian Script Ini

• Bagian <style> mengatur tampilan overlay dan tombol.
• Bagian <div id="adblock-overlay"> adalah pop-up yang akan muncul bila AdBlock aktif.
• Bagian <script> adalah logika deteksi AdBlock + timer + event tombol.

Bagian Yang Aman Diubah

• ✔ Warna
• ✔ Teks peringatan
• ✔ Durasi timer
• ✔ Isi pesan
• 🚫 Jangan ubah fungsi isBlocked(), interval, dan struktur logika — karena script akan berhenti mendeteksi.

---

📌 Script Anti-AdBlock Versi Final (Script Yang Saya Pakai di Blog Saya)

Script ini lebih ringan, stabil, full-screen overlay, dan otomatis hilang ketika AdBlock dimatikan.

Silakan copy script ini tanpa mengubah bagian apapun terlebih dahulu:

<script type='text/javascript'>
//<![CDATA[
    // =======================================================
    // 1. STYLE & HTML (Perbaikan Teks Langkah 2)
    // =======================================================

    // Konstanta Warna
    const NEON_RED = '#ff6b6b'; 
    const SOFT_RED = '#ff4757'; 
    const BRIGHT_RED = '#ff3333'; 
    const YELLOW_WARN = '#ffcc00'; 
    const SOFT_GREEN = '#8BC34A'; 

    // CSS yang diinjeksikan (Tidak Berubah)
    var c_style = `
    /* Elemen deteksi tersembunyi */
    #a-d-box { 
        position: absolute; 
        width: 1px; 
        height: 1px; 
        top: -999px; 
        left: -999px; 
        visibility: hidden; 
    }
    /* Pop-up Overlay Penuh Layar (Hitam Transparan 70%) */
    #ab-overlay-full {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); 
        z-index: 9999999;
        font-family:'Segoe UI', Arial, sans-serif;
        text-align:center;
        justify-content:center;
        align-items:center;
        color: #fff;
        backdrop-filter: blur(2px); 
    }
    .ab-content-box {
        background-color: rgba(0, 0, 0, 0.8); 
        padding:40px 30px;
        border-radius:12px;
        box-shadow: 0 0 20px 5px ${NEON_RED}; 
        max-width:480px;
        width:90%;
        border: 2px solid ${NEON_RED}; 
        animation: fadeInScale 0.4s ease-out; 
    }
    .ab-content-box h4 {
        margin:0 0 15px 0;
        font-size:28px; 
        font-weight: 700;
        color: ${SOFT_RED}; 
        line-height: 1.3;
    }
    .ab-content-box p {
        margin-bottom:25px;
        line-height:1.7;
        font-size:17px; 
        color: #F0F0F0; 
    }
    .ab-content-box ol {
        list-style: none;
        padding: 0;
        text-align: left;
        margin: 20px auto;
        max-width: 300px;
    }
    .ab-content-box ol li {
        margin-bottom: 8px;
        color: #fff; 
        font-size: 16px; 
        font-weight: 600; 
    }
    .ab-content-box ol li::before {
        content: "➡️"; 
        display: inline-block;
        width: 1.5em;
        margin-left: -1.5em;
        color: ${NEON_RED};
    }
    /* Warna Khusus untuk Teks Penting (Strong) */
    .ab-content-box strong {
        font-weight: 800;
    }
    /* Warna untuk instruksi Nonaktifkan */
    #step-disable {
        color: ${BRIGHT_RED}; 
    }
    /* Warna untuk instruksi Refresh */
    #step-refresh {
        color: ${YELLOW_WARN}; 
    }
    /* Warna untuk Status Reload (Hijau Lembut) */
    #status-reload {
        font-size: 12px;
        opacity: 0.9;
        color: ${SOFT_GREEN}; 
        display: block;
        margin-top: 10px;
    }
    /* Animasi */
    @keyframes fadeInScale {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }
    `;

    // HTML yang diinjeksikan (Langkah 2 Diperbarui)
    var h_content = `
    <div id="a-d-box" class="ad-placement banner-300x250"></div> 

    <div id="ab-overlay-full">
        <div class="ab-content-box">
            <h4>⚠️ PERHATIAN ⚠️</h4>
            <p>Kami mendeteksi adanya perangkat pemblokir konten di browser Anda. Iklan adalah satu-satunya sumber pendapatan kami untuk menjaga situs ini tetap berjalan dan konten tetap gratis.</p>
            <p>Mohon dukungannya dengan menonaktifkan pemblokir konten untuk domain ini:</p>
            <ol>
                <li>1. Klik ikon pemblokir konten Anda (misalnya: AdBlock, uBlock, AdGuard).</li>
                <li>2. Pilih <strong>"Kecualikan Situs Ini"</strong> atau <strong>matikan AdBlocker Anda langsung</strong>.</li>
                <li>3. <strong id="step-refresh">Refresh halaman Anda.</strong></li>
            </ol>
            <p class="ab-thank-you">Terima kasih banyak atas pengertian dan dukungan Anda! 😊</p>
            <span id="status-reload">(Halaman akan otomatis dimuat ulang setelah pemblokir dinonaktifkan.)</span>
        </div>
    </div>
    `;

    function s_init() {
        var style_tag = document.createElement('style');
        style_tag.type = 'text/css';
        if (style_tag.styleSheet) { style_tag.styleSheet.cssText = c_style; } 
        else { style_tag.appendChild(document.createTextNode(c_style)); }
        document.head.appendChild(style_tag);

        var h_content_modified = h_content.replace(
            /<li>2\. Pilih <strong>"Kecualikan Situs Ini"<\/strong> atau <strong>matikan AdBlocker Anda langsung<\/strong>\.<\/li>/,
            `<li>2. Pilih <strong id="step-disable">"Kecualikan Situs Ini"</strong> atau <strong id="step-disable-alt">matikan AdBlocker Anda langsung</strong>.</li>`
        );
        
        document.body.insertAdjacentHTML('beforeend', h_content_modified);

        var custom_style = document.createElement('style');
        custom_style.type = 'text/css';
        custom_style.textContent = `#step-disable-alt { color: ${BRIGHT_RED}; }`;
        document.head.appendChild(custom_style);
        
        const overlay = document.getElementById('ab-overlay-full');
        const detector = document.getElementById('a-d-box');
        
        function f_check() {
            if (!detector) return; 

            const is_blocked = detector.offsetHeight === 0 || detector.offsetWidth === 0;

            if (is_blocked) {
                overlay.style.display = 'flex';
                document.body.style.overflow = 'hidden'; 
            } else {
                overlay.style.display = 'none';
                document.body.style.overflow = 'auto'; 
                clearInterval(window.i_loop); 
            }
        }
        
        window.i_loop = setInterval(f_check, 1000); 
        setTimeout(f_check, 500); 
    }

    window.addEventListener('load', s_init);

//]]>
</script>

Bagaimana Cara Memasang Script Ini?

Masuk ke dashboard Blogger → Tema → Edit HTML

Scroll ke bagian paling bawah template.

Tempelkan script ini tepat di atas tag:

</body>

Simpan → Kunjungi blog → Aktifkan AdBlock → Test.

Apa Yang Boleh Diubah?

Bagian yang aman untuk diedit:

• ✔ Judul pop-up
• ✔ Isi paragraf
• ✔ Emoji
• ✔ Warna tombol atau tema (melalui konstanta warna di bagian awal script)
• ✔ Ukuran font
• ✔ Pesan tambahan

Bagian yang tidak boleh diubah kecuali Anda paham coding:

• ⛔ Fungsi deteksi f_check() atau isBlocked()
• ⛔ Struktur CSS elemen deteksi #a-d-box
• ⛔ Interval setInterval() dan addEventListener()
• ⛔ ID elemen seperti ab-overlay-full

Jika bagian logika menyentuh fungsi utama, script akan gagal mendeteksi AdBlock.

---

Kesimpulan

Script Anti-AdBlock ini membantu pemilik blog atau website tetap mendapatkan dukungan dari pembaca dengan meminta mereka mematikan pemblokir iklan. Script ini sudah diuji stabil, ringan, dan kompatibel dengan sebagian besar browser.

Silakan gunakan sesuai kebutuhan, dan modifikasi dengan hati-hati jika ingin personalisasi tampilan.