Hallo semua pada kesempatan kali ini saya akan membagikan cara menambahkan widget anti Ad Blocker pada Blog.
Fungsi memasang Anti Ad-blocker
Banyak developer mengembangkan Ad-block untuk memblokir iklan yang tampil pada website dengan bentuk bermacam-macam. Adanya Ad-block ini tentunya merugikan publisher dan konten kreator dalam menampilkan iklan pada konten mereka
Fungsi Anti Ad-blocker ini adalah mencegah penonton/pembaca mengaktifkan Ad-blocker mereka. Cara kerjanya adalah akan muncul notifikasi deteksi Ad-blocker dan arahan untuk segera me-nonaktifkan atau tidak bisa menampilkan konten blog kita pada browser mereka
Persiapan
Penting!
Sebelum melanjutkan ke tahap edit script HTML ada baiknya Kalian melakukan backup template terlebih dahulu
Pada dashboard Blogger pilih Tema/Theme kemudian Backup.
Cara Membuat Menambahkan Widget Anti AdBlocker Di Blog
Step 1: Silahkan Kalian Masuk Dashboard Blogger
Step 2: Pilih Tema kemudian Edit HTML
Step 3: Cari Kode ]]></b:skin> dan letakan Kode CSS berikut tepat di atasnya
/* Pop-Up Box (Style 1)*/
.Adp{position:fixed;z-index:99999;top:0;bottom:0;left:0;right:0;padding:20px;background:#f3f5fe;display:flex;justify-content:center;align-items:center}
.Adp.hidden{display:none}
.Adp .Adpo{position:relative;background:#fff;max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:30px}
.Adp .Adpo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.Adp .Adpo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.Adp .Adpo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.drK .Adp{background:#1f1f1f}
.drk .Adp .Adpo{background:#2c2d31}
.drK .Adp .Adpo svg{stroke:#fefefe}
.drK .Adp .Adpo p, .drK .Adp .Adpo h2{color:#fefefe}
Semua Template Memiliki Class Dark Mode Yang Berbeda Silahkan Sesuaikan Class Nya Dengan Template Kalian
Optinal : Untuk style 2 silahkan gunakan CSS dibawah ini
Silahkan pilih salah satu saja antara style 1 dan style 2
/* Pop-Up Box (Style 2) */
.Adp{position:fixed;top:0;bottom:0;left:0;right:0;padding:20px;background:rgba(255, 255, 255, 0.1);z-index:99999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center}
.Adp.hidden{display:none}
.Adp .Adpo{position:relative;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:20px;box-shadow:0 5px 25px rgb(0 0 0 / 20%)}
.Adp .Adpo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.Adp .Adpo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.Adp .Adpo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.Adp{animation:popupBlur .3s ease-in; -webkit-animation:popupBlur .3s}
.Adp >*{animation:popupScale .3s ease-in; -webkit-animation:popupScale .3s}
.drK .Adp{background:rgba(0, 0, 0, 0.1)}
.drK .Adp .Adpo{background:rgba(50, 50, 50, 0.8)}
.drK .Adp .Adpo svg{stroke:#fefefe}
.drK .Adp .Adpo p, .drK .Adp .Adpo h2{color:#fefefe}
@keyframes popupBlur {from{opacity:0}to{opacity:1}}
@-webkit-keyframes popupBlur{from{opacity:0}to{opacity:1}}
@keyframes popupScale{from{transform:scale(0);animation-timing-function:ease-in;opacity:0}to{transform:scale(1);opacity:1}}
@-webkit-keyframes popupScale{from{-webkit-transform:scale(0);-webkit-animation-timing-function: ease-in;opacity:0}to{-webkit-transform:scale(1);opacity:1}}
Step 5: Sekarang tambahkan Kode Html berikut tepat di atas untuk </body>. Atau jika tidak ada silahkan cari kode <!--</body>--></body> atau </body>
<!--[ Anti Ad-Blocker]-->
<div id='AdB' class='Adp hidden'>
<div class='Adpo'>
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10'/><line x1='12' x2='12' y1='8' y2='12'/><line x1='12' x2='12.01' y1='16' y2='16'/></svg>
<h2>Ad-Blocker Detected!</h2>
<p>Maaf, Matikan Ad Block Anda Untuk mengakses Website Ini.<br/>Terimakasih</p>
</div>
</div>
Step 6: Tambahkan Code JavaScript berikut tepat di Bawah Kode Html Yang Sudah Kalian Copy Di Step 5
<script>/*<![CDATA[*/ /* Anti Ad-Blocker (NoLazy)*/ !function(){var AdB=document.querySelector("#AdB");var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";e.onerror=function(){if(AdB!=null){AdB.classList.remove("hidden")}};var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(); /*]]>*/</script>
Jika Kalian memakai LazyLoad Adsense silahkanmenggunakan Script dibawah ini
<script>/*<![CDATA[*/ /* Anti Ad-Blocker (Lazyload) */ var lazyAnti=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyAnti||0!=document.body.scrollTop&&!1===lazyAnti)&&(!function(){var AdB=document.querySelector("#AdB");var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";e.onerror=function(){if(AdB!=null){AdB.classList.remove("hidden");window.lazyAnti=!0}};var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyAnti=!0)},!0); /*]]>*/</script>
Step 7: Terakhir Simpan tema kalian
ok jadi sekian Cara Menambah Widget Anti Ad Blocker Di Blogger semoga bermanfaat, dan terima kasih sudah berkunjung.
Referensi:
https://www.fineshopdesign.com