Cara Memasang Anti Adblock di Blog Terbaru
Cara Memasang Anti Adblock di Blog - Apa sih Adblock? Adblock adalah sebuah ekstensi pada browser atau aplikasi yang berfungsi untuk mencegar iklan muncul disuatu halaman web muncul. Tujuan instalasi adblock biasanya agar pengunjung bisa membaca artikel dengan nyaman tanpa perlu melihat banyak iklan yang ada disebuah blog.
Tapi disisi lain, bagi kita sebagai publisher Google Adsense atau pemilik blog, tentu hal ini bisa menjadi masalah besar karena memang salah satu penghasilan utama seorang blogger adalah dari iklan tersebut. Jika iklan yang ada di blog kita tidak tampil, maka bisa dipastikan tidak ada penghasilan yang akan masuk.
Untuk mengakali hal tersebut, salah satu cara yang bisa kita lakukan untuk membuat ektensi adblock mencegah iklan kita tidak tampil adalah dengan memasang script anti adblock di blog.
Fungsi anti adblock ini tetap sama, yaitu dengan memberikan pesan notifikasi kepada pengunjung untuk menonaktifkan ekstensi Adblock untuk blog kita namun dengan tampilan yang sedikit berbeda dan menarik. Bagi kamu yang ingin memasang anti adblock silahkan ikuti langkah-langkah berikut.
Cara Memasang Anti Adblock di Blog Terbaru
Pertama masuk ke dasbor Blogger > masuk ke menu Tema > lalu edit HTML, kemudian tambahkan kode dibawah ini sebelum kode </head> atau kode </head><!--<head/>-->.
<style>
/* Say Hi to Adblock */
@keyframes flipInX{from{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}
@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}
#arlinablock ::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#arlinablock ::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#arlinablock ::-webkit-scrollbar-track{background-color:transparent}#arlinablock ::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
#arlinablock{background:rgba(34,47,62,0.67);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#arlinablock .header{margin:10px 0 20px 0;position:relative;top:initial;left:initial}
#arlinablock .header h2{color:#222;font-size:1.8rem}
#arlinablock .inner{background:#fff;border-radius:12px;color:#222;box-shadow:0 0 2rem -1rem rgba(0,0,0,0.5);text-align:center;width:100%;max-width:640px;padding:30px;margin:7% auto 2% auto;animation:flipInX 1s}
#arlinablock button{position:relative;overflow:hidden;padding:6px 20px;background:#f5aa33;color:#fff;margin:20px 5px;cursor:pointer;border-radius:99em;font-size:13px;font-weight:500;border:2px solid #f5aa33;transition:initial;box-shadow:0 1px 0 rgba(0,0,0,0.01),0 5px 10px rgba(0,0,0,0.1)}
#arlinablock button:hover{background:#fff;color:#f5aa33;outline:none;border-color:#f5aa33}
#arlinablock button.active,#arlinablock button:hover.active{background:#ee5253;color:#fff;border-color:#ee5253;outline:none}
#arlinablock .fixblock{background:#f7f9f8;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px;border-radius:8px;border:1px solid rgba(0,0,0,0.05)}
#arlinablock .fixblock div{display:none}
#arlinablock .fixblock div.active{display:block;animation:fadeInUp .5s}
#arlinablock ol{margin-left:20px}
#arlinablock button:after,#arlinablock button:before{content:'';display:block;position:absolute;bottom:0;right:0;left:0;height:50%;background:rgba(0,0,0,0.05);background-repeat:no-repeat;transition:all .3s}
#arlinablock button:before{height:0;top:0;bottom:initial}
#arlinablock button:hover:after{height:0}
#arlinablock button:hover:before{height:50%}
@media(max-width:768px){#arlinablock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}
</style>
Selanjutnya tambahkan kode berikut ini sebelum kode </body> atau kode <!--</body>--></body>.
<script>
//<![CDATA[
// Say Hi to Adblock
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/arlinablock.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
Selesai, kemudian simpan tema.
Notifikasi adblock ini akan muncul jika ada pengunjung mengunjungi blog kita dan mengaktifkan ekstensi adblock. Jika kamu penasaran bagaimana hasilnya, kamu bisa melihat demonya disini. Pastikan kamu mengaktifkan ekstensi adblock untuk melihat hasilnya.
Tambahan: Jika kamu sudah memasang kode JS Adsense di dalam template seperti ini
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Atau seperti ini
<script>
//<![CDATA[
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
//]]>
</script>
Silahkan hapus kode tersebut, karena didalam script Anti Adblock ini sudah terpasang kode JS Adsense didalamnya.
Baiklah saya rasa itu saja yang bisa saya bagikan untuk kesempatan kali ini. Semoga artikel tentang 'Cara Memasang Anti Adblock di Blog Terbaru' ini bisa bermanfaat untuk kalian semua. Script kode anti adblock ini saya rewrite dari blog arlinacode.com, jika kamu penasaran bisa mengunjunginya langsung.
Posting Komentar untuk "Cara Memasang Anti Adblock di Blog Terbaru"