Sabtu, 24 September 2016

Cara Membuat Notifikasi (Pesan) Anti-AdBlock di Blog

Tags

Notifikasi (Pesan) Anti-Adblock Untuk Blog atau Website

Cara Membuat Notifikasi (Pesan) Anti-Adblock Untuk Blog atau Website - Adblock adalah ekstensi peramban internet yang memblokir dan mencegah munculnya iklan pada situs web. Pada tahun 2016 ini pengguna AdBlock di seluruh dunia meningkat jumlah nya, pada tahun 2015 saja pengguna Adblock di seluruh dunia sudah mencapai 198.000.000 (juta). Bayangkan saja di tahun 2015 sudah mencapai 198 juta kurang lebih nya. Mungkin di tahun 2016 juga akan meningkat.

Mungkin penyebab pengguna AdBlock meningkat pertama karena pengguna yang menjadi pengunjung ke suatu website tidak menyukai iklan karena alasan tertentu. Ke-2 mungkin karena sekarang banyak publisher - publisher iklan yang nakal menaruh iklan tidak sesuai ketentuan.

Nah pada kali ini saya " Alfin Auzikri " ( Alfin Media ) akan memberikan tutorial untuk memperingatkan pengguna AdBlock untuk mematikan Ablock nya saat berkunjung ke website atau blog kita. Karena dengan mematikan AdBlock berarti pengunjung telah menghargai jasa kita sebagai publisher dan tidak mematikan sumber penghasilan bagi blogger yang memasang iklan di blog nya.


Anti-Adblock


Cara Menambahkan/Membuat Pesan ( Notifikasi ) Bagi Pengguna AdBlock



1. Kalian buka Blogger > Edit HTML.
2. Kemudian carilah kode </style> . Setelah itu kalian taruh kode CSS di bawah ini tepat di atas kode </style> .
/* Anti-AdBlock By Alfin Media Inspired from Arlina Design */
#anti-adblock{background:#1C90F3;color:#fff;padding:10px 20px;position:fixed;bottom:-150px;left:0;opacity:0;font-size:100%;line-height:1.5em;width:100%;height:auto;z-index:10000;transition:all 0.3s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);}
.anti-adblockme{text-align:center;padding:5px}
#anti-adblock p{margin:0}
#anti-adblock a{color:#fff;text-decoration:underline}#anti-adblock a:hover{color:#fff;text-decoration:line-through}
#anti-adblock.show{pointer-events:auto;opacity:1;bottom:0}
.close-anti-adblock{background:#fff;color:#1C90F3;text-align:center;position:absolute;top:-15px;right:25px;font-size:24px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all 0.3s cubic-bezier(.25,.8,.25,1);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}
.close-anti-adblock:hover{box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);transform:scale(1,1);}

3. Sesudah kalian melakukan langkah sebelumnya, selanjutnya kalian taruh kode Javascript dan HTML di bawah ini tepat di atas kode </body> .
<div id='anti-adblock'>
<div class='anti-adblockme'>
<p>Like this blog? Keep us running by whitelisting this blog in your ad blocker.</p>
<p>This is <a href='http://www.arlinadzgn.com/p/whitelisting-arlina-design.html' target='_blank' title='how to whitelisting'>how to whitelisting</a> this blog in your ad blocker.</p>
<p>Thank you!</p>
</div>
<div class='close-anti-adblock' onclick='hidekeep()'>&#215;</div>
</div>
<script type='text/javascript'>
// Anti-Adblock
function hidekeep(){document.getElementById("anti-adblock").style.display="none"}setTimeout(function(){var e=document.getElementById("anti-adblock"),t=document.querySelectorAll("ins.adsbygoogle");0===$(t).height()&amp;&amp;(e.className="show")},2e3);
function getCurrentYear(){var e=new Date;return e.getFullYear()}el=document.getElementById("current-year"),el.innerHTML=getCurrentYear();
</script>

4. Simpan Template .
5. Kemudian tes dengan mengaktifkan AdBlock di browser kalian. Jika berhasil terpasang dengan baik notifikasi ( pesan ) Anti - AdBlock akan muncul.


Jadi jika ada pengunjung yang mengunjungi website kita. Secara otomatis notifikasi ( pesan ) anti-adblock tersebut akan muncul untuk memperingati pengguna tersebut agar mematikan adblock nya. Selain pesan ini sangat ringan di muat " Loading " dan Responsive. Dan notifikasi ini tidak akan mengganggu pengguna yang mengunjungi website kita karena jika pengunjung tetap mengaktifkan Adblock nya pengunjung tetap bisa berada di dalam website kita untuk membaca.

Sekian tutorial dari saya. Jika ada kesalahan atau error silahkan bisa berkomentar.

Saya ini seorang blogger dari Indonesia yang masih nubie :v , salam kenal dan sehat selalu.