Membuat Notifikasi Adblocker Agar Pendapatan Iklan Terus Mengalir

Membuat Notifikasi Adblocker Agar Pendapatan Iklan Terus Mengalir

Membuat Notifikasi Adblocker Agar Pendapatan Iklan Terus Mengalir

Para pengelola blog yang memasang Google AdSense atau sejenisnya di blog mereka tentu mengandalkan iklan sebagai sumber pendapatan. Dengan adanya pendapatan yang masuk itu, semangat menulis konten yang berguna untuk para pembaca akan selalu tumbuh. Selain itu pendapatan dari iklan juga bisa digunakan untuk membayar sewa hosting atau domain misalnya.

Akan tetapi, banyaknya pengelola blog yang memasangi iklan di blog mereka secara berlebihan membuat banyak pengunjung geram. Niatnya agar mendapat lebih banyak penghasilan, tetapi sebenarnya justru mengganggu kenyamanan pengunjung blog.

Akibatnya banyak pengguna internet yang memasang Adblocker di browser mereka guna memblokir iklan-iklan yang muncul saat mereka membuka sebuah blog. Namun bagi pengelola blog yang sejatinya tidak memasang iklan secara berlebihan, tentu saja adanya Adblocker ini sangat merugikan mereka. Untuk itu, kita perlu membuat notifikasi untuk pengunjung agar mereka mematikan Adblocker saat mengunjungi blog kita.

membuat notifikasi adblocker

Nah, kali ini kita akan belajar bagaimana cara memasang notifikasi agar pengguna Adblocker memasukkan blog kita ke dalam whitelist, sehingga iklan AdSense akan tetap muncul. Di bawah ini adalah penjelasan tutorial membuat notifikasi Adblocker AdSense yang dikembangkan oleh blog Arlina Design.

Notifikasi Adblocker untuk Blogger

#1. Buka dasbor blog yang ingin Anda pasangi notifikasi Adblock.
#2. Masuk ke menu “Tema” lalu klik “Edit HTML”.

#3. Cari kode ]]></b:skin> atau </style> lalu tambahkan kode berikut ini tepat di atasnya.

/* Notifikasi Adblocker */#keep-ads{padding:0;position:fixed;bottom:0;opacity:0;height:auto;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;}.keep-adsme{background:#e74c3c;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;line-height:1.5;font-family:monospace;max-width:930px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);transition:all .6s cubic-bezier(.25,.8,.25,1);border:15px solid rgba(0,0,0,.07);overflow:hidden;}.keep-adsme:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);}.keep-adsme h4{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;margin:0 auto}#keep-ads p{margin:0}#keep-ads a{color:#ffe88b;}#keep-ads a:hover{color:#ffe88b;text-decoration:underline}#keep-ads.show{left:0;top:0;right:0;z-index:1000;pointer-events:auto;opacity:1;visibility:visible;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);animation:wobble .7s;opacity:1;}.close-keep-ads{visibility:hidden;opacity:0;color:#ffe88b;text-align:center;position:absolute;bottom:10px;right:10px;font-size:42px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all .6s cubic-bezier(.25,.8,.25,1);transform:translate(0,50px);}.close-keep-ads:hover{color:#fff;transform:scale(1.0);}.keep-adsme:hover .close-keep-ads{visibility:visible;opacity:1;color:#ffe88b;transform:translate(0,0);}#keep-ads p span {font-family:fontawesome;font-size:5rem;}@keyframes wobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}

membuat notifikasi adblocker

#4. Kemudian tambahkan pula CSS khusus untuk tampilan di perangkat mobile, tepat di bawah kode tadi.

<b:if cond='data:blog.isMobileRequest == "true"'><style type='text/css'>.keep-adsme{top:0;padding:15px;border:0;font-size:1.1rem;opacity:.99;bottom:0;font-family:arial;}.keep-adsme h4{background:transparent;font-size:1.5rem;margin:40px auto 0 auto;}.close-keep-ads{text-align:center;visibility:visible;opacity:1;color:#fff;bottom:20px;right:20px;padding:0;font-size:32px;width:38px;height:38px;line-height:32px;border-radius:100%;border:2px solid #fff;transform:translate(0,0);}.close-keep-ads:hover,.keep-adsme:hover .close-keep-ads{background:#fff;color:#e74c3c;}</style></b:if>

#5. Tambahkan pula JavaScript di bawah ini tepat di atas kode </body>.

<script type='text/javascript'>//<![CDATA[// Notifikasi Adblocker Adsensefunction hidekeep(){document.getElementById("keep-ads").style.display="none"}setTimeout(function(){var e=document.getElementById("keep-ads"),t=document.querySelectorAll("ins.adsbygoogle");0===$(t).height()&&(e.className="show")},2e3);//]]></script>

#6. Masih belum selesai, Anda masih harus menambahkan HTML di bawah ini. Letaknya bebas asal masih di dalam kode <body> dan </body>.

<div id='keep-ads'><div class='keep-adsme'>  <p><h4>Adblock Terdeteksi</h4></p>  <p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>  <p>Jika Anda menyukai blog ini, silakan masukkan blog ini ke daftar whitelist adblocker Anda.</p>  <p>Ini adalah<a href='https://www.nulisbaca.com/p/whitelisting.html' target='_blank' title='Cara'>membuat whitelist</a> untuk blog ini di adblocker Anda</p>  <p>Terima kasih</p><div class='close-keep-ads' onclick='hidekeep()'>&#215;</div></div>

Di dalam kode tersebut ada tambahan ikon fontawesome. Jika di css library Anda masih belum ada, sebaiknya Anda hapus kode yang ditandai. Edit kode pada bagian link dengan link blog Anda sendiri.

Menyembunyikan Kode di Halaman Statis

Kode di atas juga bisa disembunyikan dengan beberapa ketentuan, misalnya Anda tidak ingin memunculkan notifikasi Adblocker di halaman utama atau saat blog dibuka dari smartphone. Maka Anda bisa menggunakan kode dengan tag kondisional berikut ini.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div id='keep-ads'><div class='keep-adsme'>  <p><h4> Adblock Terdeteksi </h4></p>  <p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>  <p> Jika Anda menyukai blog ini, silakan masukkan blog ini ke daftar whitelist adblocker Anda.</p>  <p>This is <a href='https://www.nulisbaca.com/p/whitelisting.html ' target='_blank' title=' Cara '> membuat whitelist </a> untuk blog ini di adblocker Anda </p>  <p>Terima kasih</p><div class='close-keep-ads' onclick='hidekeep()'>&#215;</div></div></div></b:if></b:if>

Selesai! Lalu simpan template dan lihat hasilnya.
Buka Komentar