Membuat Show Hide Ads Dengan JavaScript

tombol ini digunakan untuk menonaktifkan dan mematikan iklan google adsense, iklan mgid baik iklan apapun itu masih bisa digunakan.

Sebagai pengelolah Blog pastinya kita sudah mematuhi kebijakan dari masing-masing situs penyedia jasa periklanan, tapi terkadang dengan memasang iklan pada blog membuat kita tidak bisa leluasa mengunjungi blog sendiri.

Contoh kasus, blog yang dipasangi iklan adsense akan sangat menyulitkan buat kita membalas setiap komentar yang masuk. Jika terlalu memaksakan diri, bisa jadi sobat terkena pelanggaran trafik tidak valid, klik iklan sendiri yang tidak disengaja, dan masalah lain.

Saya punya pengalaman sendiri mengenai trafik tidak valid, akibatnya penayangan ikla pada akun Adsense saya dibatasi selama satu bulan. Trafik tidak valid tersebut sebenarnya karena saya sendiri sering mengunjungi blog pribadi yang sudah dipasang iklan.

Dengan tombol ini kita bisa menyembunyikan iklan pada tampilan pribadi, kalau sobat mau melihat Blog Kak Ryan sudah dipasang tombol show Hide Ads loh, cek aja di bagian Privasi Dan Kebijakan.

Sebenarnya tombol show hide ads ini terinpirasi dari tombol dark mode yang diposting oleh kak Igniel pada blognya, dengan beberapa modifikasi kita bisa menyembunyikan iklan. Aku juga menggunakan script Multyple LazyLoad Js yang diposting oleh Om Adi Suryadi pada blog kompiajaib.com

Cara kerjanya gampang banget, sebuah kotak centang kita proses dengan JavaScript, ketika diceklis maka akan menyimpan pengaturan pada cookies browser. Pengaturan yang sudah disimpan akan selalu diingat, dan digunakan web untuk mengidentifikasi iklan.

untuk menyimpan data ke browser, kita menggunakan fungsi localStorage(). Data akan tersimpan selama 360 hari, kecuali pengguna menghapus data browser.

Show Hide Ads dengan JQuery

Kalau blog sobat sudah terpasang JQuery cara membuatnya jadi lebih mudah lagi, cek secript dibawah ya. Agar sobat lebih mudah memahami alur kerja skrip, aku sertakan komentar pada setiap baris kode fungsi.

Tempatkan kode ini dibawah halaman, sebelum tag </body>


<script>// Fungsi ini membuat elemen script baru
function Ntaps(o) {
  var d = document.createElement("script");
  d.src = o, document.body.appendChild(d)
}
function LoadAds() {
Ntaps("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js")}
// Memeriksa cookies pengaturan tersimpan
var cek_iklan = localStorage.getItem("Ads");
if (cek_iklan  == null){
// Muat js iklan setelah halaman dimuat
window.addEventListener ? window.addEventListener("load", LoadAds, !1) : window.attachEvent ? window.attachEvent("onload", LoadAds) : window.onload = LoadAds;
} else {
// Sembunyikan semua div iklan guna menghindari 
// Area kosong
$(".adsbygoogle").each(function(){
$(this).hide(); });
}</script>

Bila sobat mempunyai lebih banyak skrip iklan, bisa tambahkan seperti pada gambar yang aku kasih tanda. Tambahkan koma, Ntaps(links script1), Ntaps(Link Scripts2), dst.

Sekarang sobat sudah mempunyai skrip, kode diatas akan dimuat secara langsung bila tidak ada setelan apapun yang disimpan pada cookie browser. Sekarang kita buat tombol slider dengan memodifikasi kotak centang checkbox dengan CSS. Salin dan tempel kode css berikut, pastekan diantara tag <head> dan </head>

<style>.switch { position: relative; display: inline-block; width: 35px; height: 15px; border:1px solid #547991; border-radius:34px; }  
.switch  input {opacity: 0; width: 0; height: 0; } 
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background:transparent; -webkit-transition: .3s; transition: .3s; } .slider:before { position: absolute; content: ""; height: 13px; width: 13px; left: 1px; bottom: .9px; background-color: #D41B1C; -webkit-transition: .3s; transition: .3s; } input:checked + .slider { background-color: #008CB7; } input:focus + .slider { box-shadow: 0 0 1px #008CB7; } input:checked + .slider:before { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 
.slider.round { border-radius: 34px; } 
.slider.round:before { border-radius: 50%; } </style>

Sekarang kamu sudah punya kode css yang bisa memodifikasi kode checkbox menjadi slider pemilih. Untuk membuat tombol pengaturan, gunakan kode dibawah inI. Kamu bisa meletakan kode dimana saja, asalkan sudah menempatkan kode css diatas. Salin dan tempel kode ini:


Iklan <label class="switch">
<input id='box_id' type='checkbox' onclick='tombolku("box_id","Ads")' value='on'/>

</label>
<script>function tombolku(div, nama2){
if (localStorage.getItem(nama2) == null ){
localStorage.setItem(nama2, 'on'); 
document.getElementById(div).checked = true; 
} else if (localStorage.getItem(nama2) == 'on' ){ 
localStorage.removeItem("nama2");
document.getElementById(div).checked = false; } 
}
</script>

Show Hide Ads Tanpa JQuery

Seperti yang kita ketahui, library JQuery bisa menyebabkan penundaan dalam proses muat halaman. Kebanyakan situs web yang di optimasi menghindari penggunaan JQuery guna mempercepat pada speed halaman. Buat kamu yang tidak menggunakan JQuery, aku buatin satu lagi, skrip dibawah adalah gabungan dari keduanya.


<!-- LETAKAN SEBELUM TAG </head> -->
<style>.switch { position: relative; display: inline-block; width: 35px; height: 15px; border:1px solid #547991; border-radius:34px; }  
.switch  input {opacity: 0; width: 0; height: 0; } 
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background:transparent; -webkit-transition: .3s; transition: .3s; } .slider:before { position: absolute; content: ""; height: 13px; width: 13px; left: 1px; bottom: .9px; background-color: #D41B1C; -webkit-transition: .3s; transition: .3s; } input:checked + .slider { background-color: #008CB7; } input:focus + .slider { box-shadow: 0 0 1px #008CB7; } input:checked + .slider:before { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 
.slider.round { border-radius: 34px; } 
.slider.round:before { border-radius: 50%; } </style>


<!--LETAKAN SEBELUM TAG </body> -->
<script>
// Fungsi ini membuat elemen script baru
function Ntaps(o) {
  var d = document.createElement("script");
  d.src = o, document.body.appendChild(d)
}

function LoadAds() {
Ntaps("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js")}
// Memeriksa cookies pengaturan tersimpan
var cek_iklan = localStorage.getItem("Ads");
if (cek_iklan  == null){
// Muat js iklan setelah halaman dimuat
window.addEventListener ? window.addEventListener("load", LoadAds, !1) : window.attachEvent ? window.attachEvent("onload", LoadAds) : window.onload = LoadAds;
} else {
// Sembunyikan semua div iklan guna menghindari 
// Area kosong
for (var insbygoogle = document.querySelectorAll("ins.adsbygoogle"), i=0; i<insbygoogle.length; i++){
if (insbygoogle[i]) {
insbygoogle[i].style="display:none";
}
}
}</script>


<!-- Tombol Ini Boleh dipasang dimana saja-->
Iklan <label class="switch">
<input id='box_id' type='checkbox' onclick='tombolku("box_id","Ads")' value='on'/> </label>
<script>function tombolku(div, nama2){
if (localStorage.getItem(nama2) == null ){
localStorage.setItem(nama2, 'on'); 
document.getElementById(div).checked = true; 
} else if (localStorage.getItem(nama2) == 'on' ){ 
localStorage.removeItem("nama2");
document.getElementById(div).checked = false; } 
}
</script>

Catatan: Jika ingin memasang pada blogger melalui edit HTML tema, pastikan sobat mengganti semua karakter double quote ( " ) menjadi single quote ( ' )

Manfaat membuat Show Hide Ads di Blogger

Manfaat utama kita bisa terhindar dari trafik tidak valid iklan adsense, pembatasan penayangan iklan, akun kena banned, dan masih banyak lagi. Kode ini akan mencegah 100% iklan tayang ketika kita mengatur slider pada posisi off. Kamu bisa melihat skrip console, secara default iklan tayang 100% pada website kita.

Tapi setelah kita mengganti tombol slider show hide ads ke posisi off, maka skrip iklan tidak akan dimuat sama sekali. Sangat effisien untuk mengamankan blog dari kelalaian pribadi.

Oh Iya Tools ini gratis 100% gratis, sobat bisa ambil kode skrip yang sudah aku bagikan. Tapi bila sobat minta dipasangkan saya siap kok. Harga pemasangan murah sekali, hanya 35ribu saja. Jika berminat silakan hubungi saya melalui halaman kontak Blog ini.

Semoga bermanfaat, bila ada pertanyaan seputar kode show hide ads tinggalkan komentar pada artikel ini.