ผมจะช่วยคุณเขียนโค้ดสำหรับหน้า login ที่สามารถใช้ได้กับ Blogger เช่น https://shilohthaichurch.blogspot.com/ เนื่องจาก Blogger มีข้อจำกัดในการเพิ่มฟังก์ชันแบบกำหนดเอง ผมจะแนะนำวิธีสร้างหน้า login พื้นฐานด้วย HTML, CSS และ JavaScript ซึ่งคุณสามารถฝังลงในหน้า Blogger ได้ผ่าน HTML/JavaScript Gadget หรือปรับแต่งในธีม

หมายเหตุ: Blogger ไม่รองรับการประมวลผลฝั่งเซิร์ฟเวอร์ (เช่น PHP) โดยตรง ดังนั้นตัวอย่างนี้จะเป็นการจำลองหน้า login ฝั่ง客户端 (client-side) หากคุณต้องการระบบ login จริงที่มีฐานข้อมูล คุณอาจต้องเชื่อมต่อกับบริการภายนอก เช่น Firebase

นี่คือโค้ดตัวอย่าง:

HTML (โครงสร้างหน้า Login)

<div class="login-container">
  <h2>เข้าสู่ระบบ</h2>
  <form id="loginForm">
    <div class="input-group">
      <label for="username">ชื่อผู้ใช้:</label>
      <input type="text" id="username" name="username" required>
    </div>
    <div class="input-group">
      <label for="password">รหัสผ่าน:</label>
      <input type="password" id="password" name="password" required>
    </div>
    <button type="submit">เข้าสู่ระบบ</button>
  </form>
  <p id="message"></p>
</div>

CSS (ตกแต่งให้สวยงาม)

<style>
  .login-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  h2 {
    text-align: center;
    color: #333;
  }
  .input-group {
    margin-bottom: 15px;
  }
  label {
    display: block;
    margin-bottom: 5px;
  }
  input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: #45a049;
  }
  #message {
    text-align: center;
    margin-top: 10px;
    color: red;
  }
</style>

JavaScript (จัดการการ login จำลอง)

<script>
  document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault();

    // ข้อมูลสำหรับทดสอบ (ในระบบจริงควรใช้เซิร์ฟเวอร์)
    const validUsername = "shiloh";
    const validPassword = "church123";

    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const message = document.getElementById('message');

    if (username === validUsername && password === validPassword) {
      message.style.color = "green";
      message.textContent = "เข้าสู่ระบบสำเร็จ! กำลังเปลี่ยนเส้นทาง...";
      // เปลี่ยนเส้นทางไปหน้าอื่น (เช่นหน้าแรกของบล็อก)
      setTimeout(() => {
        window.location.href = "<https://shilohthaichurch.blogspot.com/>";
      }, 1000);
    } else {
      message.style.color = "red";
      message.textContent = "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง";
    }
  });
</script>

วิธีใช้งานใน Blogger

  1. เพิ่ม Gadget HTML/JavaScript:
  2. หรือแก้ไขธีม:

ข้อจำกัดและคำแนะนำ

ถ้าคุณมีคำถามเพิ่มเติมหรือต้องการปรับแต่งอะไร บอกผมได้เลยนะครับ!