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.
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)}}
#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()'>×</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 == "false"'><b:if cond='data:blog.pageType != "static_page"'><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()'>×</div></div></div></b:if></b:if>
Selesai!
Lalu simpan template dan lihat hasilnya.