Cara menggunakan SHOWHIDE pada JavaScript

Apa itu Javascript ?

Javascript merupakan bahasa pemrograman tingkat tinggi dan dinamis yang diciptakan oleh Brendan Eich dan dikembangkan oleh salah satu perusahaan peramban terkenal hingga saat ini yaitu Mozilla Foundation dan Netscape Communications Corporation, bahasa pemograman ini bekerja pada beberapa peramban terbarukan seperti Google Chrome, Mozilla Firefox, Microsoft Edge, Safari dan lain-lain.

Javascript merupakan bahasa pemograman asynchronous dimana artinya bahasa pemrograman ini akan bekerja dilatar belakang dimana proses pengerjaannya itu online tetapi tidak langsung, sederhananya seperti proses latar belakang dimana program akan bekerja sekaligus dengan interaksi yang kita lakukan, berbeda dengan bahasa pemograman seperti PHP dimana kita harus menunggu proses kerja PHP selesai baru kita bisa berinteraksi.

Contoh sederhana dari asynchronous adalah seperti membuat suatu html tag muncul atau menghilang dengan menekan sebuah tombol, berikut cara membuatnya.

Cara Membuat Show / Hide Button dengan HTML dan Javascript

1. Kamu buat berkas .html baru sesuai keinginan kamu.

2. Lalu kamu ketik kode di bawah ini pada berkas .html yang telah kamu buat menggunakan aplikasi IDE kesukaan kamu atau bisa juga menggunakan notepad jika kamu tidak memiliki aplikasi IDE.

<button onclick="fungsiSaya()">Klik Saya</button>

<div id="target">
  Simpan Objek apapun disini untuk dihilangkan/dimunculkan.
</div>

3. Jika kamu sudah memasukan kode di atas, sekarang kamu tambahkan kode di bawah ini tepat di bawah kode di atas.

<script>
function fungsiSaya() {
  var x = document.getElementById("target");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

4. Maka hasil yang didapatkan akan seperti ini.

<button onclick="fungsiSaya()">Klik Saya</button>

<div id="target">
  Simpan Objek apapun disini untuk dihilangkan/dimunculkan.
</div>

<script>
function fungsiSaya() {
  var x = document.getElementById("target");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

5. Lalu coba kamu jalankan berkas .html tersebut di peramban yang biasa kamu gunakan.

6. Selesai.

Catatan:

Pada bagian Simpan Objek apapun disini untuk dihilangkan/dimunculkan. merupakan tempat dimana kamu akan menyimpan semua objek HTML yang akan kamu gunakan misalnya seperti menyimpan Teksboks, radio button dan lainnya sehingga objek tersebut akan muncul atau menghilang ketika pengguna mengklik tombol Klik Saya.

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.

Apa fungsi dari hide () pada jQuery?

Apa yang dimaksud dengan Event pada javascript?

Metode jQuery manakah di bawah ini yang digunakan untuk menyembunyikan elemen yang dipilih?