Membuat Popup Recapctha Muncul Menghilang Otomatis 12Jam Sekali

Cara Membuat Recapctha Di Blogspot Panduan Lengkap Sampai Berfungsi.

 Pernah gak kamu pas membuat artikel baru, belum terindeks sama sekali tiba-tiba sudah dikunjungi sampai puluhan kali ?.

Pasti kamu sangat aneh bukan, dan kamu pasti berfikir darimana sumbernya padahal artikelnya saja belum ke indeks sama sekali.

Jika itu terjadi maka fiks 100% kalo itu adalah bot yang mengunjungi. Lalu gimana cara mencegah bot masuk ke website kita ?

Ya caranya dengan menambahkan recapctha pada website yang dibuat.

Nah pada kesempatan kali ini saya akan memberikan Cara Membuat Recapctha Di Website / Blogger .

Namun sebelum anda ke tutorialnya yuk cari tahu bersama dahulu mengenai recapctha dan manfaatnya.

reCAPTCHA adalah sistem CAPTCHA (Challenge-Response Automated Public Turing test to tell Computers and Humans Apart) yang dikembangkan oleh Google untuk membantu membedakan antara manusia dan bot.

Bagaimana Cara Kerja Recapctha?

reCAPTCHA menghadirkan tantangan kepada pengguna, seperti:

Membaca teks yang terdistorsi: Teks yang ditampilkan sengaja dibuat sulit dibaca oleh bot, tetapi mudah dibaca oleh manusia.

Mencocokkan gambar: Pengguna diminta untuk memilih gambar yang sesuai dengan kategori tertentu, seperti "mobil", "trotoar", atau "pepohonan".

Menyelesaikan teka-teki: Pengguna diminta untuk menyelesaikan teka-teki sederhana yang mudah bagi manusia, tetapi sulit bagi bot.

Jika pengguna dapat menyelesaikan tantangan dengan benar, mereka dianggap sebagai manusia dan diizinkan untuk melanjutkan. Bot, di sisi lain, biasanya gagal menyelesaikan tantangan dan diblokir dari mengakses situs web atau layanan.

Jenis reCAPTCHA Yang Harus Diketahui:

Ada tiga versi utama reCAPTCHA:

reCAPTCHA v1: Versi ini menampilkan gambar CAPTCHA teks yang terdistorsi.

reCAPTCHA v2: Versi ini menampilkan gambar CAPTCHA "Saya bukan robot" yang meminta pengguna untuk mencentang kotak. reCAPTCHA v2 juga dapat menampilkan gambar CAPTCHA tambahan jika sistem mencurigai aktivitas bot.

reCAPTCHA v3: Versi ini berjalan di belakang layar dan memberikan skor risiko untuk setiap interaksi. Skor ini digunakan oleh pemilik situs web untuk menentukan apakah mereka perlu mengambil tindakan tambahan, seperti menampilkan CAPTCHA kepada pengguna.

Apa Saja Manfaat reCAPTCHA:

reCAPTCHA menawarkan beberapa manfaat, di antaranya:

Melindungi situs web dari spam dan penyalahgunaan: reCAPTCHA dapat membantu memblokir bot yang mencoba melakukan tindakan berbahaya seperti mengisi formulir spam, membuat akun palsu, atau menyebarkan malware.

Meningkatkan keamanan: reCAPTCHA dapat membantu meningkatkan keamanan situs web dengan membuat lebih sulit bagi peretas untuk mengakses akun pengguna atau melakukan tindakan jahat lainnya.

Meningkatkan pengalaman pengguna: reCAPTCHA v3 berjalan di belakang layar dan tidak mengganggu pengguna, sehingga memberikan pengalaman pengguna yang lebih baik.

Kekurangan reCAPTCHA:

reCAPTCHA juga memiliki beberapa kekurangan, di antaranya:

Aksesibilitas: Beberapa orang dengan disabilitas mungkin kesulitan menyelesaikan tantangan reCAPTCHA.

Ketidaknyamanan: Pengguna mungkin merasa jengkel harus menyelesaikan CAPTCHA, terutama jika mereka harus melakukannya berulang kali.

Penyalahgunaan: Bot canggih terkadang dapat melewati reCAPTCHA, sehingga tidak sepenuhnya aman.

Secara keseluruhan, reCAPTCHA adalah alat yang ampuh untuk melawan spam dan penyalahgunaan otomatis. Meskipun memiliki beberapa kekurangan, manfaatnya umumnya lebih besar. Jika Anda memiliki situs web, Anda harus mempertimbangkan untuk menggunakan reCAPTCHA untuk melindunginya dari bot.

Nah setelah kita mengetahui bersama tentang recapctha, jenis recapctha, manfaat recapctha, kekurangan recapctha. 

Seperti yang sudah dijelaskan pada kekurangan recapctha yang paling besar adalah Ketidaknyamanan: Pengguna mungkin merasa jengkel harus menyelesaikan CAPTCHA, terutama jika mereka harus melakukannya berulang kali.

Oleh sebab itu okayim.com akan membuat recapctha hanya muncul satu kali dengan popup setelah pengunjung verifikasi recapctha maka popup otomatis hilang dan hanya akan muncul kembali setelah 12 jam kemudian.

Dengan sistem yang saya buat ini bisa memberikan kenyamanan pada pengunjung website kamu. Mereka gak akan merasa terganggu kenyamanannya sedikitpun.

Panduan Cara Membuat Recapctha Di Website 

Langkah pertama untuk membuat recapctha di website atau blog yaitu harus mendaftar aku recapctha Console terlebih dahulu.

Berikut adalah panduan cara mendaftar reCAPTCHA:

Langkah 1: Buat Akun Google

Jika Anda belum memiliki akun Google, Anda harus membuatnya terlebih dahulu. Anda dapat membuat akun Google baru di https://www.google.com

/account/about/.

Langkah 2: Buka Konsol Admin Google reCAPTCHA

Buka konsol Admin Google reCAPTCHA di https://developers.google.com/

recaptcha.

Langkah 3: Daftarkan Situs Web Anda

Klik tombol "Daftar Situs Baru". Masukkan nama domain situs web Anda dan pilih jenis reCAPTCHA yang ingin Anda gunakan.

Langkah 4: Dapatkan Kunci Situs dan Kunci Rahasia

Setelah Anda mendaftarkan situs web Anda, Anda akan mendapatkan kunci situs dan kunci rahasia. Simpan kunci ini dengan aman, karena Anda akan membutuhkannya nanti untuk mengintegrasikan reCAPTCHA ke situs web Anda.

Catatan:

Anda dapat mendaftarkan beberapa situs web ke konsol Admin Google reCAPTCHA.

Anda dapat mengubah jenis reCAPTCHA yang Anda gunakan kapan saja.

Anda dapat melihat statistik tentang penggunaan reCAPTCHA di situs web Anda di konsol Admin Google reCAPTCHA.

Pada saat pemilihan versi recapctha pilihlah yang versi recapctha v.2 ya kawan. Kemudian pilih yang kotak centang saya bukan robot.

Pada pengisian domain dan label domain isi seperti contoh www.okayim.com jadi harus pakai www.

Cara Membuat Recapctha Saya Bukan Robot Di Blog / Website 

Silahkan copy seluruh kode javascript dibawah ini lalu letakan di atas kode </head> tema blog / website kamu.

<script async='async' defer='defer' src='https://www.google.com/recaptcha/api.js'>

Kemudian Salim kode html dibawah ini dan pasangkan di atas kode </body> jika kamu pengguna blogspot kamu bisa memasangkannya di widget Tata Letak kemudian pilih html javascript.

  
  
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .popup {
      display: none; /* Tersembunyi secara default */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    .popup-content {
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      text-align: center;
    }
  </style>



  <div id="recaptcha-popup" class="popup">
    <div class="popup-content">
      <h1>Saya Tahu Anda Bukan Robot, Oleh Sebab Itu Silahkan Centang Kotak Di Bawah ini</h1>

<br />

      <div class="g-recaptcha" data-sitekey="masukan kunci situs recapctha anda disini" data-callback="recaptchaCallback"></div>
    </div>
  </div>

  <script>
    // Simpan status validasi di localStorage
    var validated = false;

    // Periksa apakah pengguna sudah divalidasi
    function isUserValidated() {
      return localStorage.getItem('validated') === 'true';
    }

    // Tandai pengguna sebagai terverifikasi
    function markUserValidated() {
      localStorage.setItem('validated', 'true');
    }

    // Callback function for reCAPTCHA verification
    function recaptchaCallback(token) {
      console.log('Token:', token);
      markUserValidated();
      document.getElementById('recaptcha-popup').style.display = 'none';
    }

    // Tampilkan pop-up jika pengguna belum divalidasi
    window.onload = function() {
      if (!isUserValidated()) {
        document.getElementById('recaptcha-popup').style.display = 'flex';
      }
    };
  </script>

Pada teks yang saya warnai silahkan ganti dengan kunci situs recapctha anda ya sobat.

Oke sekian Tutorial kali ini tentang Cara Membuat Recapctha Di Website / Blogger semoga artikel ini membantu.