2 Cara Memasang Anti AdBlock di Blog

GEMA.MY.ID
GEMA.MY.ID
Tuesday, April 20, 2021
2 Cara Memasang Anti AdBlock di Blog

Anti AdBlock Blog - Suatu kebanggaan tersendiri saat kita diterima menjadi publisher Google AdSense dan Mgid. Bagaimana tidak, dua media periklanan tersebut memang terkenal akan persyaratannya yang cukup ketat.

Akibatnya, banyak blogger yang terpaksa kecewa karena ditolak dengan berbagai alasan tertentu. Saya sendiri awalnya juga sempat ditolak sebelum akhirnya diterima beberapa bulan lalu.

Permasalahan tidak sampai di situ, setelah diterima, kok penghasilan kecil sekali? Ternyata cek kesana kemari, sebagian besar pembaca menggunakan fitur AdBlock. Bagi yang belum tahu apa yang dimaksud dengan istilah tersebut, yuk dibaca sampai habis.

Rekomendasi: Cara Memasang Lazy Load Iklan Mgid di Blog

Apa itu AdBlock?

AdBlock adalah salah satu fitur dari browser yang berguna untuk memblokir tampilan iklan di artikel yang sedang diakses. Ada banyak alasan pembaca menggunakan fitur ini, salah satunya mencegah perangkat dialihkan ke halaman berbahaya.

Namun bagaimana dengan mereka yang mengharapkan penghasilan dari iklan? Tentu sangat merugikan bukan? Tapi tenang saja, Anda bisa melakukan antisipasi dengan memasang anti AdBlock.

Cara kerjanya juga sudah cukup jelas. Pembaca yang menggunakan penyaring iklan tersebut tidak diizinkan mengakses halaman sebelum menutup AdBlock-nya . Atau, pembaca tersebut memasukkan URL kita ke dalam daftar putih / white list.

Nah di artikel ini, ada dua jenis tampilan yang bisa digunakan. Silahkan pilih salah satu berdasarkan jenis tampilan yang diinginkan.

Cara Memasang Anti AdBlock di Blog

Cara 1

Untuk cara pertama, silahkan menghapus seluruh kode pemanggil iklan berikut di HTML template. Tenang saja, skrip yang akan digunakan nantinya sudah tersedia kode tersebut. Daripada mubazir, mending yang lama dihapus saja:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  • Masuk ke BLOGGER
  • Pilih menu TEMA
  • Pilih EDIT HTML
  • Tempel di atas ]]></b:skin>:
    • @keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
    @keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scale3d(1,1,1)}}
    #dewablock{background:rgba(0,0,0,0.65);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;animation:fadeInDown 1s;z-index:999999}
    #dewablock .header{margin:0 0 15px 0}
    #dewablock .inner{background:#e3482d;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;width:600px;padding:40px;border-radius:5px;margin:7% auto 2% auto;animation:rubberBand 1s}
    #dewablock button{padding:10px 20px;border:0;background:rgba(0,0,0,0.15);color:#fff;margin:20px 5px;cursor:pointer;transition:all .3s}
    #dewablock button:hover{background:rgba(0,0,0,0.35);color:#fff;outline:none}
    #dewablock button.active,#dewablock button:hover.active{background:#fff;color:#222;outline:none}
    #dewablock .fixblock{background:#fff;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px}
    #dewablock .fixblock div{display:none}
    #dewablock .fixblock div.active{display:block}
    #dewablock ol{margin-left:20px}
    @media screen and (max-width:768px){#dewablock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}
  • Tempel di atas </body>:
    • <script>
    function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/dewaplokis/block@master/dewablock.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
    </script>
  • Pilih SIMPAN
  • Selesai.

Rekomendasi: Cara Memasang Lazy Load Iklan Google AdSense di Blog

Cara 2

Mirip dengan cara pertama di atas, silahkan menghapus kode pemanggil iklan terlebih dahulu sebelum memasang skrip:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  • Masuk ke BLOGGER
  • Pilih menu TEMA
  • Pilih EDIT HTML
  • Tempel di atas ]]></b:skin>:
    • #ignielAdBlock{background:rgba(0,0,0,0.85);padding:0;position:fixed;bottom:0;left:0;top:-100px;right:0;z-index:1000;opacity:1;visibility:visible;height:auto}
    #ignielAdBlock svg{width:100px;height:100px}
    #ignielAdBlock svg path{fill:#fff}
    #ignielAdBlock a{color:#ffe88b}
    #ignielAdBlock a:hover{color:#ffe88b;text-decoration:underline}
    #ignielAdBlock .isiAds{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;font-weight:400;line-height:1.5em;font-family:monospace;max-width:800px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);border:15px solid rgba(0,0,0,.07);overflow:hidden;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:visible;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;pointer-events:auto;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);opacity:1;animation:ignielWobble .5s;-moz-animation: ignielWobble .5s;-webkit-animation:ignielWobble .5s;-o-animation:ignielWobble .5s}
    #ignielAdBlock .isiAds:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2)}
    #ignielAdBlock .isiAds h4,#ignielAdBlock .isiAds .judul{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;font-weight:600;margin-bottom:20px}
    #ignielAdBlock .tutupAds{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)}
    #ignielAdBlock .tutupAds:hover{color:#fff;transform:scale(1.0)}
    #ignielAdBlock .isiAds:hover .tutupAds{visibility:hidden;opacity:0;color:#ffe88b;transform:translate(0,0)}
    @keyframes ignielWobble{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)}}
    @-webkit-keyframes ignielWobble{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)}}
    @-moz-keyframes ignielWobble{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)}}
  • Tempel di atas </body>:
    • <script src="https://cdn.jsdelivr.net/gh/Ferisp/Widget@main/adblock.js"></script>
  • Pilih SIMPAN
  • Selesai.

Silahkan mengatur tampilan notifikasi dengan mengedit skrip CSS.

Rekomendasi: Cara Menghilangkan Iklan Disqus di Blog

Penutup

Pemasangan telah berhasil dilakukan. Pilih jenis AdBlock yang memang sesuai keinginan Anda. Lebih dari itu, semoga pendapatan dari penayangan iklan lebih bertambah, Amin.

Cukup sekian artikel tentang 2 Cara Memasang Anti AdBlock di Blog ini, Terima kasih.

Referensi:
www.dewaplokis.com / tinyurl.com/2c2hvwe7
www.igniel.com / tinyurl.com/yvzw5bh6

edit Tags: Blog
LihatTutupKomentar
Cancel