Cara Memasang Anti AdBlock di Blogger dengan Notifikasi Modern

---

Keberadaan iklan pada website atau blog sangat dibutuhkan bagi publisher atau pemilik blog untuk membantu kelangsungan pengelolaan blog agar bisa tetap aktif dan terus diperbarui. Iklan merupakan salah satu sumber penghasilan yang dapat membantu pemilik blog menyediakan informasi, membayar biaya operasional dan mengembangkan konten yang lebih baik.

Di sisi lain, sebagian pengguna internet memilih menggunakan pemblokir iklan karena ingin membaca sebuah halaman dengan lebih nyaman. Kondisi inilah yang akhirnya membuat penggunaan AdBlock menjadi sebuah dilema antara kenyamanan pengunjung dan kebutuhan publisher untuk memperoleh penghasilan dari iklan.

Tidak semua pemilik blog menempatkan iklan secara berlebihan. Banyak publisher tetap memperhatikan kenyamanan pembaca dengan menempatkan iklan pada posisi yang tidak menutupi konten atau menghambat pengunjung ketika membaca artikel.

CODEFLARE SYSTEM Informasi Singkat AdBlock Detection Overview

ONLINE

AD BLOCKER

Ad blocker merupakan perangkat lunak atau ekstensi browser yang dapat menyaring dan menyembunyikan elemen tertentu pada halaman website yang dianggap sebagai iklan.

Pada blog yang menggunakan iklan sebagai salah satu sumber pendapatan, pemblokir iklan dapat menyebabkan unit iklan tidak dimuat atau tidak terlihat oleh pengunjung.

DETECTION Browser Side

ACTION Notification

SYSTEM JavaScript

DISPLAY Responsive

DATA READY CLIENT SIDE

Walaupun pemilik blog sudah berusaha menjaga keseimbangan antara tampilan iklan dan kenyamanan pembaca, terkadang pemblokir iklan tetap aktif tanpa disadari oleh pengunjung.

Salah satu pendekatan yang dapat digunakan adalah menampilkan pemberitahuan ketika sistem mendeteksi kemungkinan adanya pemblokir iklan. Pengunjung kemudian dapat memilih memasukkan website ke daftar pengecualian atau whitelist agar iklan pada website tersebut bisa dimuat kembali.

Cara seperti ini sering disebut sebagai Anti AdBlock, AdBlock Detector, AdBlock Notification atau sebelumnya populer dengan sebutan AdBlock Killer.

Perlu diperhatikan bahwa tujuan script seperti ini sebaiknya bukan untuk memaksa pengunjung, tetapi memberikan informasi bahwa keberadaan iklan membantu mendukung website yang sedang mereka kunjungi.

Gunakan Anti AdBlock Secara Bijak

Hindari memasang terlalu banyak iklan sekaligus. Pengalaman membaca yang nyaman tetap menjadi salah satu alasan pengunjung mau kembali ke blog Anda.

Script Anti AdBlock Blogger Versi Baru

Versi berikut dibuat lebih sederhana dibandingkan script lama. CSS dan JavaScript sudah berada dalam satu kode sehingga pengguna tidak perlu memanggil file CSS maupun JavaScript eksternal.

Script bekerja dengan membuat sebuah elemen kecil yang menyerupai area iklan. Setelah halaman selesai dimuat, script melakukan pemeriksaan terhadap elemen tersebut. Jika elemen terdeteksi telah disembunyikan atau diblokir, notifikasi Anti AdBlock akan ditampilkan.

Tanpa jQuery Script menggunakan JavaScript native.

Tanpa External CSS Seluruh tampilan berada dalam satu kode.

Tanpa External JS Tidak perlu memanggil file JavaScript lain.

Responsive Nyaman digunakan pada desktop maupun mobile.

Custom Message Teks pemberitahuan dapat diubah dengan mudah.

Retry Detection Pengunjung dapat melakukan pengecekan ulang.

Script pendeteksi AdBlock tidak dapat menjamin deteksi 100% pada setiap ekstensi atau konfigurasi browser karena metode pemblokiran iklan dapat berbeda dan terus berkembang.

<!-- CodeFlare Anti AdBlock -->
<style>
#cfAntiAdBlock{display:none;position:fixed;inset:0;z-index:999999;background:rgba(12,18,28,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px;box-sizing:border-box;align-items:center;justify-content:center;}
#cfAntiAdBlock.cf-show{display:flex;}
#cfAntiAdBlock .cf-aab-box{position:relative;width:100%;max-width:480px;background:#f8fafc;color:#172033;border-radius:16px;padding:30px 25px;text-align:center;box-sizing:border-box;box-shadow:0 25px 70px rgba(0,0,0,.35);animation:cfAabShow .45s cubic-bezier(.2,.8,.2,1);overflow:hidden;}
#cfAntiAdBlock .cf-aab-scan{position:absolute;left:0;top:-2px;width:100%;height:2px;background:linear-gradient(90deg,transparent,#0083da,transparent);animation:cfAabScan 3s linear infinite;}
#cfAntiAdBlock .cf-aab-icon{width:76px;height:76px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e9f5ff;color:#0083da;font-size:34px;font-weight:700;}
#cfAntiAdBlock .cf-aab-title{font-size:clamp(20px,4vw,26px);font-weight:700;line-height:1.25;margin:0 0 12px;}
#cfAntiAdBlock .cf-aab-text{font-size:15px;line-height:1.7;margin:0;color:#4b5563;}
#cfAntiAdBlock .cf-aab-help{margin:18px 0 0;padding:12px 14px;background:#eef7ff;color:#23415f;border-radius:10px;font-size:13px;line-height:1.6;}
#cfAntiAdBlock .cf-aab-btn{appearance:none;border:0;outline:0;margin-top:20px;background:#0083da;color:#fff;padding:11px 20px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}
#cfAntiAdBlock .cf-aab-btn:hover{background:#006eb7;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,131,218,.25);}
#cfAntiAdBlock .cf-aab-brand{display:block;margin-top:16px;font-size:11px;color:#8a94a3;letter-spacing:.5px;}
.cf-ad-bait{position:absolute!important;left:-9999px!important;top:-9999px!important;width:10px!important;height:10px!important;display:block!important;}
@keyframes cfAabShow{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cfAabScan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
@media(max-width:480px){#cfAntiAdBlock{padding:15px}#cfAntiAdBlock .cf-aab-box{padding:26px 18px}#cfAntiAdBlock .cf-aab-icon{width:66px;height:66px;font-size:29px}}
</style>

<div aria-hidden='true' class='adsbox ad-banner ad-unit cf-ad-bait' id='cfAdBait'>&nbsp;</div>

<div aria-labelledby='cfAabTitle' aria-modal='true' id='cfAntiAdBlock' role='dialog'>
<div class='cf-aab-box'>
<div class='cf-aab-scan'></div>
<div class='cf-aab-icon'>!</div>
<div class='cf-aab-title' id='cfAabTitle'>Ad Blocker Terdeteksi</div>
<p class='cf-aab-text'>Kami mendeteksi kemungkinan pemblokir iklan sedang aktif. Iklan membantu mendukung operasional dan pengembangan konten website ini.</p>
<div class='cf-aab-help'>Silakan nonaktifkan AdBlock untuk website ini atau tambahkan website ke whitelist kemudian klik tombol di bawah.</div>
<button class='cf-aab-btn' id='cfAabRetry' type='button'>Saya Sudah Menonaktifkan AdBlock</button>
<span class='cf-aab-brand'>ANTI ADBLOCK • CodeFlare</span>
</div>
</div>

<script>
//<![CDATA[
(function(){
'use strict';
var bait=document.getElementById('cfAdBait');
var overlay=document.getElementById('cfAntiAdBlock');
var retry=document.getElementById('cfAabRetry');
if(!bait||!overlay){return;}
function adBlocked(){
if(!bait){return false;}
var style=window.getComputedStyle(bait);
return bait.offsetHeight===0||bait.offsetWidth===0||style.display==='none'||style.visibility==='hidden';
}
function showNotice(){
overlay.classList.add('cf-show');
document.documentElement.style.overflow='hidden';
document.body.style.overflow='hidden';
}
function hideNotice(){
overlay.classList.remove('cf-show');
document.documentElement.style.overflow='';
document.body.style.overflow='';
}
function checkAdBlock(){
setTimeout(function(){
if(adBlocked()){showNotice();}else{hideNotice();}
},500);
}
if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',checkAdBlock);}else{checkAdBlock();}
if(retry){retry.addEventListener('click',function(){window.location.reload();});}
})();
//]]>
</script>
<!-- CodeFlare Anti AdBlock -->

Cara Memasang Anti AdBlock di Blogger

Kode di atas dapat ditempatkan langsung pada template Blogger. Sebelum melakukan perubahan pada template, sebaiknya lakukan backup terlebih dahulu agar template dapat dikembalikan apabila terjadi kesalahan.

01

Buka Dashboard Blogger

Masuk ke dashboard Blogger kemudian pilih blog yang akan dipasangi Anti AdBlock.

02

Buka Edit HTML

Pilih menu Tema kemudian buka bagian Edit HTML.

03

Cari Penutup Body

Cari kode </body> menggunakan fitur pencarian pada editor HTML Blogger.

04

Pasang Script

Salin seluruh kode Anti AdBlock kemudian tempatkan tepat sebelum kode </body>.

05

Simpan dan Uji

Simpan template kemudian buka halaman blog menggunakan browser untuk melakukan pengujian.

Jika menggunakan sistem cache browser atau CDN, lakukan refresh halaman setelah perubahan agar script versi terbaru dapat langsung diuji.

Mengubah Teks Notifikasi

Teks di dalam kotak notifikasi bebas disesuaikan dengan gaya bahasa blog Anda. Cari bagian berikut pada kode:

<div class='cf-aab-title' id='cfAabTitle'>Ad Blocker Terdeteksi</div>
<p class='cf-aab-text'>
Kami mendeteksi kemungkinan pemblokir iklan sedang aktif.
Iklan membantu mendukung operasional dan pengembangan konten website ini.
</p>

Anda dapat mengganti kalimat tersebut tanpa perlu mengubah sistem pendeteksi AdBlock pada bagian JavaScript.

Saya lebih menyarankan menggunakan kalimat yang sopan dan menjelaskan alasan mengapa pengunjung diminta menonaktifkan AdBlock daripada langsung memaksa pengunjung untuk membuka iklan.

Bagaimana Script Anti AdBlock Bekerja

Pada versi ini terdapat sebuah elemen kecil dengan beberapa nama class yang umum diasosiasikan dengan area iklan.

Ketika halaman selesai dimuat, JavaScript akan memeriksa ukuran dan status tampilan elemen tersebut.

Bait Created Elemen pengujian dibuat.

Detection Status elemen diperiksa.

Notification Pesan ditampilkan.

Jika elemen tersebut tidak memiliki tinggi atau lebar, atau status tampilannya berubah menjadi tersembunyi, script menganggap kemungkinan terdapat pemblokir iklan yang sedang aktif.

Pendeteksian seperti ini dilakukan sepenuhnya pada sisi browser pengunjung dan tidak memerlukan database.

Apakah Anti AdBlock Selalu Berhasil

Tidak ada metode pendeteksian AdBlock sederhana yang dapat dianggap bekerja sempurna pada seluruh browser dan seluruh ekstensi pemblokir iklan.

Setiap pemblokir iklan mempunyai filter dan metode penyaringan berbeda. Pengguna juga dapat menggunakan konfigurasi filter tambahan sehingga sebuah teknik yang bekerja pada satu perangkat belum tentu memberikan hasil yang sama pada perangkat lainnya.

Karena itu, script pada artikel ini lebih tepat digunakan sebagai sistem pemberitahuan daripada dianggap sebagai cara mutlak untuk memblokir seluruh pengguna AdBlock.

Pengalaman Pengunjung Tetap Penting

Jika banyak pengunjung menggunakan AdBlock, periksa kembali jumlah iklan, posisi iklan dan pengalaman membaca pada blog. Pemberitahuan Anti AdBlock akan jauh lebih masuk akal apabila blog tidak menggunakan iklan yang terlalu mengganggu.

Versi Sebelumnya

Artikel CodeFlare sebelumnya menggunakan script Anti AdBlock yang terdiri dari file CSS dan JavaScript eksternal. Kode tersebut tetap dipertahankan sebagai arsip sekaligus untuk pengguna yang masih menggunakan implementasi versi lama.

Legacy Code Versi lama tetap tersedia untuk pengguna CodeFlare yang sudah menggunakannya sebelumnya.

<!-- Kill AdBlock -->
<link href='https://codeflareblogspot.github.io/code/KillAdBlock.css' rel='stylesheet'/>
<script>
var titleAd = 'AD Blocker Detected';
var notifAd = 'Please disable your browser <u>AD-Block</u> to continue reading or register this blog into whitelist.<br/><b>Thank You</b>';
</script>
<script src='https://codeflareblogspot.github.io/code/KillAdBlock.js'></script>
<!-- Kill AdBlock -->

Kode tersebut membutuhkan dua file eksternal milik versi sebelumnya. Apabila Anda membuat instalasi baru, versi mandiri pada bagian awal artikel lebih praktis karena CSS dan JavaScript berada dalam satu kode.

Kode Anti UC Browser Versi Lama

Artikel versi sebelumnya juga menyediakan kode khusus untuk mendeteksi UC Browser. Kode ini tetap dipertahankan sebagai dokumentasi dan kompatibilitas untuk instalasi lama.

Pendekatan tersebut membaca user agent browser kemudian menampilkan halaman pemberitahuan apabila ditemukan teks UCBrowser. Untuk instalasi baru, lebih disarankan menggunakan script Anti AdBlock umum daripada memblokir berdasarkan nama browser tertentu.

<script type='text/javascript'>
//<![CDATA[
var getUCBrowser=navigator.userAgent;
var chkUCBrowser=getUCBrowser.search("UCBrowser");
if(chkUCBrowser>1){
var judulUC='UC Browser Detected';
var notifUC='Warning! this page require Google Chrome browser.';
var alertUC=document.createElement('div');
alertUC.id='adBlockUC';
alertUC.innerHTML='<div class="isiAdsUC">'+judulUC+'<br/>'+notifUC+'</div>';
document.body.appendChild(alertUC);
}
//]]>
</script>

Memilih Versi Anti AdBlock

Jika blog Anda sebelumnya sudah menggunakan script CodeFlare versi lama dan masih berjalan sesuai kebutuhan, tidak ada keharusan untuk langsung menggantinya.

Namun apabila sedang melakukan instalasi baru, kode versi baru lebih mudah dikelola karena seluruh komponen berada dalam satu script dan tidak bergantung pada file JavaScript atau stylesheet eksternal.

Versi Baru STANDALONE

CSS dan JavaScript berada dalam satu kode serta memiliki tampilan notifikasi responsif.

Versi Lama LEGACY

Tetap tersedia untuk pengguna yang sudah menggunakan implementasi CodeFlare sebelumnya.

Tips Menggunakan Anti AdBlock

Keberadaan Anti AdBlock sebaiknya tetap diimbangi dengan pengaturan iklan yang baik. Saya lebih memilih menempatkan unit iklan pada area yang tidak menghalangi teks artikel daripada memenuhi halaman dengan terlalu banyak iklan.

Jika pengunjung merasa blog tetap nyaman dibaca, permintaan untuk menonaktifkan AdBlock biasanya akan terasa lebih masuk akal karena pengunjung dapat memahami bahwa iklan digunakan untuk membantu operasional website.

Selain itu, lakukan pengujian menggunakan beberapa browser dan ukuran layar setelah memasang script. Pastikan notifikasi tetap dapat dibaca pada smartphone dan tidak ada bagian tombol yang keluar dari layar.

Butuh Script Blogger yang Dibuat Khusus?

CodeFlare melayani pembuatan website Blogger, custom widget, modifikasi template, perbaikan script serta pengembangan fitur Blogger sesuai kebutuhan.

Konsultasikan Kebutuhan Anda

---

Semoga pembaruan script ini dapat menjadi alternatif bagi pemilik Blogger yang ingin memberikan pemberitahuan kepada pengunjung ketika pemblokir iklan sedang digunakan. Anda dapat memilih versi baru maupun mempertahankan versi sebelumnya sesuai dengan konfigurasi blog yang digunakan.