Cara Termudah Memasang Notifikasi Anti Adblock untuk Blog


Cara Memasang Notifikasi Anti Adblock untuk Blog - Berselancar di internet tanpa iklan memang terkadang membuat kita menjadi terasa nyaman. Tiada peganggu yang muncul, tiada elemen yang menyedot kuota.

Tunggu dulu...

Apa maksud dari peganggu yang muncul dan menyedot kuota? sebuah iklan? apa itu persektif kalian terhadap iklan yang ada pada sebuah website? 

Jika seperti itu, berati kalian telah salah.

Tidak semua website penyedia informasi menggunakan iklan yang menganggu untuk pengunjung. Bahkan kita bisa menghitungnya karena sekarang ini, adsense menjadi sebuah layanan penyedia iklan yang paling banyak digunakan.

Adsense sendiri ramah terhadap lingkungan online alias ranah online, tidak menggangu, bahkan iklan yang relavan serta ringan untuk dimuat. Hal ini menjadi pembuktian bahwa iklan tidak selamanya mengganggu dan bahkan, dengan iklan, terkadang kita bisa menemukan apa yang kita mau.

Baca : Cara Mematikan Ekstensi Adblock

Sekarang, kita rubah menjadi persektif sebagai seorang pemiliki website.

Apa yang kalian pikirkan misalkan seorang pengunjung yang memakai adblock? sebuah hak asasi mereka? memang benar, tapi bukankah kita juga perlu menekan hak asasi kita sendiri?

Terkesan egois, tetapi kita disini sama-sama diuntungkan loh ( selama iklan kita tidak mengganggu ). Kita bisa memberikan iklan yang menarik untuk pengunjung dan membuat mereka penasaran, kita juga bisa mendapatkan keuntungan sendiri. Hubungan mutualisme juga bisa terjadi dalam internet.

Untuk menekankan hal tersebut, mungkin cara yang efektif namun tidak menggangu adalah memberikan notifikasi untuk para pengguna adblock untuk mematikannya tanpa harus mengunci konten blog kita. Bukan begitu? Nah oleh karena itu, disini saya akan memberikan tutorialnya.

Cara Memasang Pemberitahuan para Pengguna Adblock

1. Buka blogger.com dan loginkan menggunakan akun kalian

2. Menuju Theme > Edit HTML

3. Cari kode </style> dan letakkan kode dibawah berada diatasnya.

/* 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:#3577e3;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:#295494;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)}}

4. Sekarang kalian cari kode </body> atau &lt;/body&gt; dan letakkan kode dibawah diatasnya juga.

// 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>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>Suka blog ini? Biarkan kami tetap hidup dengan mengunjungi blog ini tanpa menggunakan adblock</p>
<p>Berikut adalah <i><b><a href='https://www.czign.info/2019/03/cara.mematikan.berbagai.macam.adblock.di.browser.html' target='_blank' title='Show me how'>Cara Mematikan Adblock</a></b></i> dari berbagai macam ekstensi adblock</p>
</div>
<div class='close-keep-ads' onclick='hidekeep()'>&#215;</div>
</div>
</div>
</b:if>

Keterangan :

  • Ubah www.czign.info menggunakan url artikel atau laman yang berisikan tentang cara menonaktifkan adblock
  • Kalian juga bisa merubah kata-kata'nya.

5. Selesai, bukankah cara ini terbilang mudah? untuk kode CSS kalian juga bisa merubah-rubahnya seperti warna dan posisi.

Manfaat Memasang Notifikasi Adblock

Ada beberapa manfaat yang perlu kalian ketahui, apalagi cuma sekedar "notifikasi" yang mana tidak menghalangi pengunjung untuk tetap membaca artikel. Bukan begitu? Nah beberapa manfaat diantaranya adalah :

  • Menyadarkan para pengunjung untuk bagaimana cara kita menghargai seseorang secara tidak langsung.
  • Membuat penghasilan blog bertambah. Hal ini terjadi ketika para pengunjung mematikan adblocknya dan tertarik dengan iklan kita kemudian mengkliknya.
  • Kita bisa membuka potensi penuh dari website kita. Kenapa? karena kita bisa melihat penghasilan secara nyata ketika pengunjung tidak memakai adblock.

Nah, mungkin sekian tutorial kali ini, semoga bermanfaat dan apabila terdapat salah kata, mohon dimaafkan. Terima kasih.

source code : https://www.arlinadzgn.com/2017/02/notifikasi-adblocker-adsense-ala-kompi-ajaib.html

Subscribe to receive free email updates: