Cara Memberi Sandi pada Halaman Blogger

Dalam pengelolaan blog, terkadang kita membutuhkan fitur pembatasan akses pada halaman tertentu—misalnya untuk konten khusus, materi pembelajaran, atau halaman internal. Sayangnya, platform Blogger tidak menyediakan fitur proteksi password secara bawaan.

Namun, dengan sedikit sentuhan JavaScript, kita bisa membuat sistem login sederhana berbasis password langsung di halaman Blogger. Menariknya, metode ini cukup ringan, mudah diterapkan, dan terlihat profesional.

---

🔐 Konsep Dasar

Script ini bekerja dengan cara:

• Menampilkan popup input password menggunakan SweetAlert2

• Memvalidasi input pengguna

• Jika benar → akses halaman dibuka

• Jika salah → halaman akan otomatis reload

---

💡 Script Proteksi Halaman Blogger

Silakan salin dan tempelkan kode berikut ke dalam halaman Blogger (mode HTML):

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
  var jkpass1 = "123"; // Password yang benar

  Swal.fire({
      title: "Masukkan Password",
      input: "password",
      inputPlaceholder: "Ketik password dulu ...",
      allowOutsideClick: false,
      inputAttributes: {
          autocapitalize: "off",
          autofocus: true
      },
      showConfirmButton: false,
      allowEnterKey: false,
      didOpen: () => {
          const input = Swal.getInput();
          input.focus();

          const keepFocus = setInterval(() => {
              if (document.activeElement !== input) {
                  input.focus();
              }
          }, 100);

          input.addEventListener("input", () => {
              const inputValue = input.value;

              if (inputValue.length >= 3 && inputValue !== jkpass1) {
                  clearInterval(keepFocus);
                  Swal.fire({
                      icon: "error",
                      title: "Waduh Password Salah!",
                      text: "Sumonggo cobi maleh.",
                      timer: 1500,
                      showConfirmButton: false
                  }).then(() => {
                      location.reload();
                  });
              }

              if (inputValue === jkpass1) {
                  clearInterval(keepFocus);
                  Swal.fire({
                      icon: "success",
                      title: "Alhamdulillah, Barokalloh !",
                      text: "Silahkan Masuk ...",
                      timer: 1000,
                      showConfirmButton: false
                  }).then(() => {
                      window.location.href;
                  });
              }
          });
      }
  });
</script>

---

⚙️ Cara Penerapan di Blogger

1. Masuk ke dashboard Blogger

2. Pilih Halaman (Pages) atau Postingan (Posts)

3. Buat halaman baru atau edit halaman yang ingin diproteksi

4. Ubah ke mode HTML View

5. Tempelkan script di atas

6. Simpan dan publikasikan

---

🧠 Penjelasan Singkat

• jkpass1 → password utama (bisa Anda ubah sesuai kebutuhan)

• if (inputValue.length >= 3 && inputValue !== jkpass1) → ganti angka "3" dengan jumlah karakter sandi anda.

• SweetAlert2 → menampilkan popup modern dan interaktif

• input event → membaca setiap ketikan user secara realtime

• location.reload() → reload halaman jika salah

• window.location.href → melanjutkan akses jika benar

---

✨ Penutup

Dengan pendekatan sederhana ini, Anda sudah bisa membuat halaman Blogger terlihat lebih eksklusif dan terkontrol. Meski bukan solusi keamanan penuh, teknik ini sangat efektif untuk kebutuhan praktis sehari-hari.

Selamat mencoba dan semoga bermanfaat!