Cara Memasang Notifikasi | Pesan Anti Adblock di Blog

Cara Memasang Notifikasi | Pesan Anti Adblock di Blog

Cara Memasang Notifikasi | Pesan Anti Adblock di Blog. AdBlock adalah ekstensi peramban internet yang memblokir dan mencegah munculnya iklan pada situs web. Saat ini, AdBlock tersedia di berbagai web browser seperti Google Chrome, Apple Safari, Mozilla Firefox, Opera, dan beberapa peramban lainnya. Dalam peranannya Adblock sangat efektif dalam memblokir iklan-iklan yang bertebaran di suatu website / blog.

Namun yang perlu disadari bagi para pengguna internet, bahwa blog pemasang iklan adalah blog yang memang mata pencahariannya didapat dengan beriklan. Tak jarang pula dari penghasilan tersebut digunakan sebagai biaya perawatan website, mulai dari pembelian domain sampai pencarian informasi yang didapat dari blogwalking seperti saya.

Memang tak dapat dipungkiri terkadang para blogmaster yang memasang iklan sangat keterlaluan dengan memasang iklan dihampir seluruh layar monitor dimana hal tersebut bisa mengakibatkan loading blog serasa berat, sehingga pengunjung seringkali merasa jengkel, karena bukannya informasi yang didapat tetapi kuota internet yang berkurang akibat tersedot loading iklan.

Untuk itu diperlukan kesadaran bagi para pengguna internet, baik blogmaster ataupun pengunjung untuk saling memahami dengan memakai prinsip simbiosis mutualisme. Sehingga menguntungkan bagi kedua belah pihak.

Notifikasi ini dibuat sebagai pengganti | alternatif plugin anti adblock fullscreen dimana plugin tersebut memaksa para pengunjung untuk mematikan adblock mereka untuk dapat menjelajah blog.

Seperti halnya plugin anti adblock, notifikasi ini akan muncul hanya jika pengunjung mengaktifkan adblock mereka. Namun bedanya notifikasi ini muncul dibawah layar sehingga tidak mengganggu pengunjung. Terlebih lagi notifikasi ini pun juga bisa ditutup.

Bagaimana cara memasang Notifikasi | Pesan Anti Adblock di Blog? Silakan simak tutorial berikut.

Cara Memasang Notifikasi | Pesan Anti Adblock di Blog

Pertama silakan pasang CSS berikut di atas </b:skin>

#ads-show {
    background: #1d1a1a url(http://old-support.getadblock.com/discussions/suggestions/930/assets/41f34812e287a38a6d2eca970c560a7ef5c8c111/adblock-128.svg) no-repeat;
    background-origin: content-box;
    background-size: contain;
    border-top: 5px solid #fff;
    color: #fff;
    padding: 10px 20px;
    position: fixed;
    bottom: -150px;
    left: 0;
    opacity: 0;
    font-size: 100%;
    text-align: center;
    line-height: 1.5em;
    transition: all .3s;
    width: 100%;
    height: auto;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 100000;
}

#ads-show p {
  margin: 0!important
}

#ads-show a {
  color:#fff;
  text-decoration:underline;
}

#ads-show.show {
  pointer-events: auto;
  opacity: 1;
  bottom: 0
}

.close-ads-show {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
  font-weight: 700;
  cursor:pointer;
  width:24px;
  height:24px;
  line-height:24px;
  text-align:center;
}

Lalu pasang HTML dan Javascript berikut diatas </body>

<div id='ads-show'>
  <p>Anda menyukai artikel kami? Silakan masukkan blog kami kedalam whitelisting anda!</p>
  <p>Ini adalah cara menambahkan blog ke dalam <a href='http://www.agungjakanugraha.com/p/whitelisting-tutorial-di-browser-anda.html' target='_blank' title='how to whitelisting'>Whitelisting</a> di adblock anda.</p>
  <p>Terima Kasih!</p>
  <div class='close-ads-show' onclick='hidekeep()'>&#215;</div>
</div>
<script>
//<![CDATA[
setTimeout(function() {
  var info = document.getElementById("ads-show");
  var ads = document.querySelectorAll("ins.adsbygoogle");
  if ($(ads).height() === 0 ) {
    info.className = "show";
  }
}, 2000)
function hidekeep() {
  var e = document.getElementById("ads-show").style.display = "none";
};
//]]>
</script>

Simpan dan Selesai

Note : Untuk whitelisting silakan isikan dengan halaman cara untuk menambahkan whitelisting anda.

Demikian tutorial Cara Memasang Notifikasi | Pesan Anti Adblock di Blog semoga bermanfaat. Terima kasih telah membaca artikel Agung Jaka Nugraha. Wassalam

Cara Memasang Notifikasi | Pesan Anti Adblock di Blog