Tiga Langkah Mudah Membuat Adsblocker Pada blog

Published by : Admin ADSENSE TUTORIAL BLOG

Akhir-akhir ini pendapatan pada salah satu blog saya menurun drastis padahal untuk jumlah review/pengjung stagnan relative dari hari kehari, setelah diterlusuri ternyata banyak pengunjung dari blog saya menggunakan Ads Blocker, memang hal ini menguntungkan bagi pembaca akan tetapi sangat mempengaruhi kehidupan dari blog yang saya kelola tersebut .

AdsBlocker Membunuh website / Blog

Keuntungan berpihak sepenuhnya pada membaca namun sangat merugikan bagi penyedia website/blog karena pada umumnya iklan adalah nyawa dari website/blog tersebut, bayangkan jika semua menerapkan Ads Blocker maka sangat mungkin website/situs akan dimatikan oleh pengelola.

Ada solusi dalam kasus ini dimana agar pengunjung website/blog tidak mengaktifkan Ads Blocker hanya saja cara ini skedar pesan notifikasi saja. meski begitu ada sedikit perubahan setelah dan sesudah memasang AdsBlocker

Berikut 3 langkah mudah membuat Adblocker pada website agar pengunjung tetap bisa menikmati konten yang disajikan dan penayangan iklan tetap berjalan.

Langkah pertama
Masuk Blog
Template
Edit HTML
Langkah kedua
Tambahkan script CSS berikut ]]></b:skin> atau </style>

/* Notifikasi Adblocker Adsense */
#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;margin:auto;top:30%;left:0;right:0;font-size:1.2rem;line-height:1.5;max-width:930px;box-shadow:0 0 50px rgba(0,0,0,0.25);transition:all .6s cubic-bezier(.25,.8,.25,1);overflow:hidden}
.keep-adsme:hover{box-shadow:0 0 20px rgba(0,0,0,0.15);}
.keep-adsme h4{background:#d04537;color:#fff;padding:15px 25px;font-size:2.2rem;margin:0 auto;border-bottom:1px solid rgba(0,0,0,0.1);}
.keep-me{border-top:1px solid rgba(255,255,255,0.1);padding:10px 30px 50px 30px}
#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:32px;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)}}

Tambahkan juga script CSS di bawah ini (Khusus tampilan smartphone)

<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>

Kemudian tambahkan Javascript di bawah ini sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
// Notifikasi Adblocker Adsense
function 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>

Tambahkan HTML di bawah ini bebas di dalam kode <body> dan </body>

<div id='keep-ads'>
<div class='keep-adsme'>
  <p><h4>Adblock Detected</h4></p>
<div class='keep-me'>
  <p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>
  <p>Like this blog? Keep us running by whitelisting this blog in your ad blocker</p>
  <p>This is <a href='http://bocahweb.blogspot.com' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>
  <p>Thank you</p>
</div>
<div class='close-keep-ads' onclick='hidekeep()'>&#215;</div>
</div>
</div>

Langkah ketiga, setelah semua Script diatas terpasang sesuai pada tempatnya kemudian save dan lihat hasilnya

Pada kolom terdapat Url http://bocahweb.blogspot.com warna kuning adalah jika diklik akan menuju ke Url tersebut silahkan anda ganti dengan Url tujuan anda.

Semoga dengan Tutorial pemasangan Adblocker diatas bisa membuat pengunjung website/blog kita lebih pengertian terhadapan kerja keras kita salam menyajikan konten-konten bagi mereka. selamat mecoba

Salam protes Adsblock

BOCAH WEB

Download Free Android Apps

Tiga Langkah Mudah Membuat Adsblocker Pada blog | Bocahweb