Cara Memasang Anti Adblock Blogger Responsive

Anti Adblock Blogger
Bagi seorang publisher adsense, beredarnya plugin adblock merupakan sebuah tantangan tersendiri. Tentu saja, dengan adanya plugin adblock menyebabkan impresi iklan turun secara drastis. Ini memungkinkan turunnya penghasilan yang didapatkan, sangat menyedihkan tapi itulah fakta yang bisa kita temui sekarang.

Blog raksasa populer seperti Huffington Post bisa menghasilkan sekitar $2.330.000 bulan dari penghasilan iklan mereka, dan TechCrunch menghasilkan sekitar $800.000 dari iklan banner. Bahkan publisher seperti Abduzeedo mendapat keuntungan yang fantastis dari pendapatan iklan mereka, yaitu diperkirakan sekitar $12.000 bulan.

Pengertian Anti Adblock

Anti AdBlock adalah sebuah rangkaian script yang memaksa tampilan sebuah situs menampilkan notifikasi tertentu jika pengguna browser mengaktifkan plugin AdBlock. Biasanya anti adblock menutupi seluruh  konten situs web (overlay), yang berisi notifikasi agar pengguna browser untuk menonaktifkan plugin adblock yang mereka pakai. Tujuan diciptakannya anti adblock adalah agar iklan dapat tetap muncul, demi mendukung keberlangsungan hidup sebuah situs web yang bergantung pada penghasilan dari iklan.

Mengapa Publisher Perlu Memasang Anti AdBlock?

Di Amerika, sekitar kurang lebih 30,1% penduduk menggunakan fasilitas plugin adblock untuk peramban yang mereka gunakan. Bertolak ke Inggris, angka pengguna adblock juga sangat mengejutkan, ada sekitar 39% penduduk inggris yang memakai adblock untuk peramban mereka, itu artinya setara dengan sekitar £2.900.000.000 pendapatan iklan yang hilang.

Untuk melindungi penghasilan, seorang publisher harus merelakan sedikit waktu untuk memikirkan ini. Pasalnya, adblock adalah sebuah fenomena yang tidak bisa dipandang remeh. Hampir setiap device gadget orang Indonesia sudah dipasangi adblock, ini bukan hal yang baru sebenarnya. Untuk itu, cara yang paling efektif dalam menangani masalah ini adalah dengan cara memasang anti adblock blogger untuk platform yang digunakan.

Cara memasang Anti Adblock di Blogger

Kalo dipikir-pikir, memasang anti adblock sedikit berguna untuk situs kita, selain mengingatkan betapa pentingnya menghargai perjuangan para publisher, lama-lama orang akan tau, prinsip saling menguntungkan akan terjalin antara publisher dengan pengunjungnya. Pengunjung mendapatkan informasi, publisher mendapatkan apa yang seharusnya mereka dapat juga hehehe.

Berikut langkah-langkah memasang script anti adblock:
1. Login ke dashboard kalian masing-masing
2. Masuk ke Theme > Edit HTML
3. Cari tag  ]]></b:skin> lalu pastekan kode berikut ini tepat diatasnya
/*!
 * Anti-adblock v2.1.0
 * Copyright 2019 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
 */
@font-face {
  font-family: "wgd";
  src: url(https://cdn.jsdelivr.net/gh/da2l/host@1/dist/fonts/wgd.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
[class^="wgd-"]:before,
[class*=" wgd-"]:before {
  font-family: "wgd" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wgd-usd:before {
  content: "\61";
}
.wgd-eur:before {
  content: "\62";
}
.wgd-btc:before {
  content: "\63";
}
.wgd-times:before {
  content: "\64";
}
@keyframes square {
  0% {
    transform: translateY(0) scale(1.5) rotate(0);
    opacity: 1
  }
  100% {
    transform: translateY(-600px) scale(1) rotate(-200deg);
    opacity: 0
  }
}
.WgD-particles i {
  font-size: 4em;
  font-weight: 400;
  position: absolute;
  bottom: -100px;
  animation: square 10s infinite;
}
.WgD-particles i:nth-child(6),
.WgD-particles i:nth-child(4),
.WgD-particles i:nth-child(11),
.WgD-particles i:nth-child(8) {
  font-size: 3em;
}
.WgD-particles i:nth-child(2),
.WgD-particles i:nth-child(3),
.WgD-particles i:nth-child(10) {
  font-size: 2em;
}
.WgD-particles i {
  animation-duration: 16s;
}
.WgD-particles i:nth-child(1) {
  left: 15%;
}
.WgD-particles i:nth-child(2) {
  left: 24%;
  animation-duration: 8s
}
.WgD-particles i:nth-child(3) {
  left: 50%;
  animation-delay: 5s
}
.WgD-particles i:nth-child(4) {
  left: 40%;
  animation-delay: 7s;
  animation-duration: 15s
}
.WgD-particles i:nth-child(5) {
  left: 36%;
  animation-delay: 6s
}
.WgD-particles i:nth-child(6) {
  left: 44%;
  animation-delay: 10s;
  animation-duration: 20s
}
.WgD-particles i:nth-child(7) {
  left: 58%;
  animation-delay: 2s;
  animation-duration: 18s
}
.WgD-particles i:nth-child(8) {
  left: 45%;
  animation-duration: 14s
}
.WgD-particles i:nth-child(9) {
  left: 66%;
  animation-delay: 3s;
  animation-duration: 12s
}
.WgD-particles i:nth-child(10) {
  left: 74%;
  animation-duration: 25s
}
.WgD-particles i:nth-child(11) {
  left: 80%;
  animation-delay: 4s
}
body.ab-is-detected {
  overflow: hidden !important;
}
[id=WgD] {
  display: none;
}
[id=WgD].is-detected {
  display: block;
}
@keyframes wgdfade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#WgD {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 14px;
  animation: wgdfade .3s;
  z-index: 99999;
}
.WgD-position {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 900;
}
.WgD-title {
  margin: 0;
  margin-bottom: .5em;
}
.WgD-text {
  margin: 0;
  font-weight: 400;
}
.WgD-reload {
  text-decoration: none;
  display: inline-block;
  margin-top: 2em;
  font-weight: 500;
  transition: transform .3s;
}
.WgD-reload:hover {
  transform: scale(1.05);
}
.WgD-close {
  position: absolute;
  top: 0;
  right: 0;
  text-decoration: none;
  font-size: 20px;
  color: #999;
  padding: 1rem;
  line-height: 1;
  display: block;
}
.WgD-container img {
  max-width: 100%;
  margin-bottom: 1em;
  object-fit: cover;
}
/*
=> Personalizacion
*/

/* Base
-----------------------------------------*/
[id=WgD] {
  font-family: 'Roboto', sans-serif; /*fuente*/
  background: #FF416C; /*fondo por defecto */
  background: linear-gradient(to right, #FF4B2B, #FF416C);/*degradado*/
}
.WgD-particles i {
  color: rgba(0, 0, 0, 0.2); /*color particulas*/
}
/* Animacion (daneden.github.io/animate.css/)
-----------------------------------------*/
.WgD-container {
  animation: bounceIn 1s; /*nombre y duracion*/
}
/* Cuerpo
-----------------------------------------*/
.WgD-container {
  padding: 3.2em; /*naruto(relleno)*/
  max-width: 450px; /*ancho maximo*/
  background-color: #fff; /*fondo*/
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1); /*sombra*/
  text-align: center; /*aliniacion del texto*/
  line-height: 1.5; /*interlineado*/
  border-radius: 10px; /*bordes redondeados*/
  color: #37474F;
}
.WgD-title {
  font-size: 1.6em; /*tamaño fuente*/
}
.WgD-text {
  font-size: 1.2em; /*tamaño fuente*/
}
/* Boton Recargar
-----------------------------------------*/
a.WgD-reload {
color: #fff !important;
}
.WgD-reload {
  box-shadow: rgba(0, 0, 0, .12) 0 3px 13px 1px; /*sombra*/
  color: #fff;
  padding: 1em 1.5em; /*naruto(relleno)*/
  background: #f46b45; /*fondo*/
  border-radius: 3px; /*bordes redondeados*/
}
.WgD-reload:hover {
    color: #fff;
}
.WgD-close:hover {
    color: #464646;
}
/* Imagen
-----------------------------------------*/
.WgD-container img {
  max-height: 200px; /*altura maxima*/
}

/*Demo*/
.demo {
  padding: 3rem;
  background: #fff;
  color: #757575;
  margin: auto;
  max-width: 400px;
  position: absolute;
  top: 50%;left: 50%;
  transform: translate(-50%,-50%);
}
body {
  background: #f1f1f1;
  line-height: 1.5;
}

4. Selanjutnya cari tag </body> lalu pastekan kode berikut tepat diatasnya
<div id='WgD'>
  <div class='WgD-position'>
    <div class='WgD-container'>
      <h3 class='WgD-title'>Adblock Terdeteksi</h3>
      <p class='WgD-text'>Mohon matikan plugin <strong>Adblock</strong> untuk tetap mendukung situs ini berkembang</p>
      <a class='WgD-reload' href='#' onclick='adBlockReload()'>Disable Adblock &amp; Reload</a>
    </div>
  </div>
  <div class='WgD-particles'>
    <i class='wgd-usd'/>
    <i class='wgd-eur'/>
    <i class='wgd-usd'/>
    <i class='wgd-eur'/>
    <i class='wgd-btc'/>
    <i class='wgd-usd'/>
    <i class='wgd-usd'/>
    <i class='wgd-eur'/>
    <i class='wgd-btc'/>
    <i class='wgd-usd'/>
    <i class='wgd-eur'/>
  </div>
</div>

<!-- Adblock -->
<script>
function adBlockClose() {
  document.getElementById(&quot;WgD&quot;).classList.remove(&quot;is-detected&quot;);
  document.body.classList.remove(&quot;ab-is-detected&quot;)
};
function adBlockReload() {
  window.location.reload();
  return !1
};
function adBlockDetected() {
  document.getElementById(&quot;WgD&quot;).classList.add(&quot;is-detected&quot;);
  document.body.classList.add(&quot;ab-is-detected&quot;)
};
if(typeof fuckAdBlock !== &#39;undefined&#39; || typeof FuckAdBlock !== &#39;undefined&#39;) {
	adBlockDetected();
} else {
	var importFAB = document.createElement(&#39;script&#39;);
	importFAB.onload = function() {
		fuckAdBlock.onDetected(adBlockDetected)
		fuckAdBlock.onNotDetected(adBlockNotDetected);
	};
	importFAB.onerror = function() {
		adBlockDetected(); 
	};
	importFAB.integrity = &#39;sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=&#39;;
	importFAB.crossOrigin = &#39;anonymous&#39;;
	importFAB.src = &#39;https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js&#39;;
	document.head.appendChild(importFAB);
}
</script>

5. Simpan, dan selesai. Kalo coba deh, aktifkan adblock dan reload blog kamu. Semoga berhasil, jika ada error silahkan komen dibawah!

Sekian artikel singkat yang bisa mimin sampaikan, semoga kalian bisa cara memasang anti adblock di blogger tanpa menemui error apapun. Sampai jumpa di postingan selanjutnya ya, terima kasih!

1 komentar untuk "Cara Memasang Anti Adblock Blogger Responsive"

  1. terima kasih sudah buat tutorial ini. Sangat membantu. Semoga makin sukses :)

    BalasHapus

Posting Komentar

Berlangganan via Email

Adblock Terdeteksi

Mohon matikan plugin Adblock untuk tetap mendukung situs ini berkembang

Disable Adblock & Reload