Cara Membuat Form Login di Blogger (Draft Blogger)

Updated: 24 Mei, 2025 • 0 • min read

Table of Contents

Form login adalah fitur penting jika kamu ingin memberikan akses terbatas kepada pengunjung blog atau membuat tampilan blog yang terlihat profesional.

Meskipun Blogger tidak mendukung sistem login pengguna seperti WordPress secara langsung, kamu bisa membuat form login sederhana berbasis HTML, CSS, dan JavaScript, atau menghubungkannya dengan layanan pihak ketiga seperti Google Forms, Firebase, atau email.

Berikut adalah langkah-langkah membuat form login sederhana di platform Blogger (Draft Blogger).

🔧 Persiapan

Login ke Blogger Draft
Masuk ke: https://draft.blogger.com
Pilih blog yang ingin kamu tambahkan form login-nya.
Masuk ke Menu Halaman atau Postingan
Kamu bisa menempatkan form login di halaman statis (Page) atau di postingan biasa (Post).

🧩 Cara Membuat Form Login Sederhana (HTML + CSS + JavaScript)

1. Buka Editor Halaman/Post

Klik Halaman > Halaman Baru atau Postingan Baru.

2. Ubah ke Mode HTML

Di editor post, klik menu "HTML" (bukan "Compose").

3. Tempelkan Kode Berikut:

<style>
.login-box {
  width: 300px;
  margin: 50px auto;
  padding: 30px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.login-box h2 {
  text-align: center;
}
.login-box input[type="text"],
.login-box input[type="password"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
}
.login-box input[type="submit"] {
  width: 100%;
  background-color: #4285f4;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}
.login-box input[type="submit"]:hover {
  background-color: #3367d6;
}
</style>

<div class="login-box">
  <h2>Login</h2>
  <form onsubmit="return validateLogin()">
    <input type="text" id="username" placeholder="Username" required />
    <input type="password" id="password" placeholder="Password" required />
    <input type="submit" value="Login" />
  </form>
</div>

<script>
function validateLogin() {
  var user = document.getElementById("username").value;
  var pass = document.getElementById("password").value;

  // Ganti dengan username dan password kamu sendiri
  if(user === "admin" && pass === "123456") {
    alert("Login berhasil!");
    window.location.href = "https://your-redirect-page.com";
    return false;
  } else {
    alert("Username atau Password salah!");
    return false;
  }
}
</script>

🛡️ Catatan Penting:

Ini bukan sistem login yang aman. Password disimpan di sisi klien (browser) dan bisa dilihat orang lain melalui view source.
Hanya cocok untuk simulasi, tampilan demo, atau pengalihan halaman sederhana.
Untuk sistem login sungguhan, kamu harus menggunakan backend seperti Firebase, PHP + MySQL, atau layanan khusus.

🚀 Alternatif Sistem Login yang Lebih Aman

Gunakan Firebase Authentication
Firebase menyediakan sistem login berbasis email, Google, dan lainnya. Ini cocok untuk aplikasi atau blog yang ingin memiliki pengguna login sungguhan.
Gunakan Google Form + Script
Buat form dengan Google Form dan proses validasi bisa dilakukan lewat Google Apps Script.
Redirect Login ke Platform Lain
Misalnya jika kamu punya website utama di WordPress, arahkan login ke sana.

📌 Kesimpulan

Meski Blogger tidak mendukung sistem login kompleks secara langsung, kamu tetap bisa membuat form login sederhana dengan HTML dan JavaScript.

Cocok untuk tampilan awal, portal redirect, atau testing. Namun, jika kamu membutuhkan autentikasi yang benar-benar aman, pertimbangkan menggunakan platform lain atau layanan pihak ketiga seperti Firebase.

AdinJava