Dengan Gambar, Tutorial Lengkap Cara Memasang Adblock Ringan untuk blogger

Cara memasang Widget Adblock
Tutorial Lengkap Cara Memasang Adblock Ringan untuk blogger
Menambahkan Widget  Adblock
Menambahkan Widget Adblock

KKami bangga disetujui sebagai penerbit Google AdSense dan Mgid. Tidak, kedua outlet iklan tersebut sebenarnya terkenal dengan persyaratan yang agak ketat. Akibatnya, banyak blogger kecewa dengan penolakan karena berbagai alasan. Saya sendiri awalnya ditolak sebelum akhirnya disetujui beberapa bulan lalu.

Mengapa pendapatan begitu rendah setelah menerimanya, masalahnya tidak berakhir di sini? Ternyata cek kesana kemari, sebagian besar pembaca menggunakan fitur AdBlock. Bagi yang belum tahu apa yang dimaksud dengan istilah tersebut, yuk dibaca sampai habis.

Daftar Isi

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 kerja juga cukup jelas. Pembaca yang menggunakan filter iklan ini tidak akan dapat mengakses halaman sampai mereka menutup AdBlock. Atau pembaca kami memasukkan daftar putih/daftar putih URL kami.

Sekarang ada dua jenis tampilan yang dapat digunakan dalam dokumen ini. Pilih salah satu dari keduanya tergantung pada jenis tampilan yang Anda inginkan.


Cara Memasang Anti AdBlock di Blog

Step 1 : Silahkan Masuk di Blogger
Step 2 : Pilih Tema dan Edit HTML
Step 3 : Cari Code ]]></b:skin> dan letakkan Kode CSS tepat diatasnya!
Step 4 : Pilih Tema dan Edit HTML

Perhatian
Semua Template Memiliki Class Dark Mode Yang Berbeda Silahkan Sesuaikan Class Nya Dengan Template Anda ( Class DarkMode Sudah Ditandai )

		/* Pop-Up Box (Style 1)*/
		.Adp{position:fixed;z-index:99999;top:0;bottom:0;left:0;right:0;padding:20px;background:#f3f5fe;display:flex;justify-content:center;align-items:center}
		.Adp.hidden{display:none}
		.Adp .Adpo{position:relative;background:#fff;max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:30px}
		.Adp .Adpo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
		.Adp .Adpo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
		.Adp .Adpo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
		.drK .Adp{background:#1f1f1f}
		.drk .Adp .Adpo{background:#2c2d31}
		.drK .Adp .Adpo svg{stroke:#fefefe}
		.drK .Adp .Adpo p, .drK .Adp .Adpo  h2{color:#fefefe}
	

Perhatian
Tambahkan Css Berikut Untuk Style 2 Adblocker

		/* Pop-Up Box (Style 2) */
		.Adp{position:fixed;top:0;bottom:0;left:0;right:0;padding:20px;background:rgba(255, 255, 255, 0.1);z-index:99999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center}
		.Adp.hidden{display:none}
		.Adp .Adpo{position:relative;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:20px;box-shadow:0 5px 25px rgb(0 0 0 / 20%)}
		.Adp .Adpo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
		.Adp .Adpo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
		.Adp .Adpo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
		.Adp{animation:popupBlur .3s ease-in; -webkit-animation:popupBlur .3s}
		.Adp >*{animation:popupScale .3s ease-in; -webkit-animation:popupScale .3s}
		.drK .Adp{background:rgba(0, 0, 0, 0.1)}
		.drK .Adp .Adpo{background:rgba(50, 50, 50, 0.8)}
		.drK .Adp .Adpo svg{stroke:#fefefe}
		.drK .Adp .Adpo p, .drK .Adp .Adpo h2{color:#fefefe}
		@keyframes popupBlur {from{opacity:0}to{opacity:1}}
		@-webkit-keyframes popupBlur{from{opacity:0}to{opacity:1}}
		@keyframes popupScale{from{transform:scale(0);animation-timing-function:ease-in;opacity:0}to{transform:scale(1);opacity:1}}
		@-webkit-keyframes popupScale{from{-webkit-transform:scale(0);-webkit-animation-timing-function: ease-in;opacity:0}to{-webkit-transform:scale(1);opacity:1}}
	
Step 5 : Selanjutnya Tambahkan kode HTML berikut tepat di atas </body> Jika code tersebut tidak ditemukan cari kata kunci lainnya <!--</body>--></body>
		<!--[ Anti Ad-Blocker]-->
		<div id='AdB' class='Adp hidden'>
		<div class='Adpo'>
		<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10'/><line x1='12' x2='12' y1='8' y2='12'/><line x1='12' x2='12.01' y1='16' y2='16'/></svg>
		<h2>Ad-Blocker Detected!</h2>
		<p>Maaf, Matikan Ad Block Anda Untuk mengakses Website Ini.<br/>Terimakasih</p>
		</div>
		</div>
	
Step 6 : Tambahkan Javascript tepat di atas code yang telah kamu berikan di Stap 5
		<script>/*<![CDATA[*/ /* Anti Ad-Blocker (NoLazy)*/ !function(){var AdB=document.querySelector("#AdB");var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";e.onerror=function(){if(AdB!=null){AdB.classList.remove("hidden")}};var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(); /*]]>*/</script>
	

Perhatian
Jika Anda memakai LazyLoad Adsense Anda bisa menggunakan Script dibawah ini

		<script>/*<![CDATA[*/ /* Anti Ad-Blocker (Lazyload) */ var lazyAnti=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyAnti||0!=document.body.scrollTop&&!1===lazyAnti)&&(!function(){var AdB=document.querySelector("#AdB");var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";e.onerror=function(){if(AdB!=null){AdB.classList.remove("hidden");window.lazyAnti=!0}};var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyAnti=!0)},!0); /*]]>*/</script>
	

Penutup

Sekian artikel tentang tutorial Cara Memasang Adblock Ringan untuk blogger, Semoga dapat bermanfaat untuk sobat semua. Terimakasih.

Content Creator, Graphic Designer, UI / UX Designer

My Notes On Blogger : Ernesia.xyz