Cara Menanam dan Memanggil Popup Verifikasi Email di Blogger

Dalam artikel ini, kita akan belajar cara menanam dan memanggil kode popup verifikasi email di Blogger. Dengan metode ini, kita bisa membuat tampilan yang profesional, ringan, dan hanya memuat kode saat dibutuhkan.

📌 1. Persiapan Awal

Sebelum mulai, pastikan Anda sudah memiliki:
✔ Akun Blogger untuk mengedit template dan menambahkan widget
✔ Akun Firebase yang sudah tertanam di template Blogger (agar tidak perlu menambah ulang kode Firebase)
✔ Akses ke HTML Template Blogger

📌 2. Menambahkan Kode ke Template Blogger

Kita akan menambahkan CSS dan JavaScript langsung ke dalam template Blogger agar bisa digunakan di seluruh halaman.

A. Tambahkan CSS ke Template Blogger

Masuk ke Blogger
Buka Tema → Klik Edit HTML
Cari tag <head>
Tambahkan kode CSS ini di dalamnya:

<!-- Font Awesome untuk ikon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<style>
/* Tombol utama */
.btn-open {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background: #007bff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.btn-open:hover {
    background: #0056b3;
    transform: scale(1.05);
}

.btn-open i {
    font-size: 18px;
}

/* Modal */
.modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: visibility 0s, opacity 0.3s ease-in-out;
}

.modal.show {
    visibility: visible !important;
    opacity: 1 !important;
}

.modal-content {
    background: white;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
}

.btn-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
}

.btn-close i {
    color: #ff0000;
}

.input-container {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
}

.input-container i {
    font-size: 18px;
    color: #007bff;
}

.input-email {
    flex: 1;
    border: none;
    font-size: 16px;
    outline: none;
}

.btn-resend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background: #28a745;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-resend:hover {
    background: #218838;
}

.btn-resend i {
    font-size: 18px;
}

/* Notifikasi */
.notification {
    display: none;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}

.notification.success {
    color: green;
}

.notification.error {
    color: red;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
</style>

B. Tambahkan JavaScript ke Template Blogger

Scroll ke bawah di dalam Edit HTML
Tambahkan kode ini sebelum </body>

<script>
document.addEventListener("DOMContentLoaded", function () {
    console.log("✅ DOM Siap");

    const openModalBtn = document.getElementById("openModalBtn");
    const closeModalBtn = document.querySelector(".btn-close");
    const modal = document.getElementById("verificationModal");
    const resendBtn = document.getElementById("resendVerificationBtn");
    const emailInput = document.getElementById("emailInput");
    const notificationEl = document.getElementById("notification");

    // Buka modal
    openModalBtn.addEventListener("click", function () {
        modal.classList.add("show");
    });

    // Tutup modal
    closeModalBtn.addEventListener("click", function () {
        modal.classList.remove("show");
        notificationEl.style.display = "none";
        emailInput.value = "";
    });

    // Tutup modal jika klik di luar modal
    window.addEventListener("click", function (event) {
        if (event.target === modal) {
            modal.classList.remove("show");
            notificationEl.style.display = "none";
            emailInput.value = "";
        }
    });

    // Cek status verifikasi email & kirim ulang jika belum diverifikasi
    resendBtn.addEventListener("click", function () {
        if (typeof firebase === "undefined" || !firebase.auth) {
            showNotification("Firebase tidak tersedia!", "error");
            return;
        }

        const user = firebase.auth().currentUser;
        if (!user) {
            showNotification("Anda belum login!", "error");
            return;
        }

        user.reload().then(() => {
            if (user.emailVerified) {
                showNotification('<i class="fas fa-check-circle"></i> Email Anda sudah diverifikasi!', "success");
            } else {
                user.sendEmailVerification().then(() => {
                    showNotification('<i class="fas fa-envelope"></i> Email verifikasi telah dikirim!', "success");
                }).catch((error) => {
                    showNotification('<i class="fas fa-exclamation-triangle"></i> ' + error.message, "error");
                });
            }
        }).catch((error) => {
            showNotification('<i class="fas fa-times-circle"></i> ' + error.message, "error");
        });
    });

    function showNotification(message, type) {
        notificationEl.innerHTML = message;
        notificationEl.className = `notification ${type}`;
        notificationEl.style.display = "block";
    }
});
</script>

📌 3. Menambahkan Popup ke Halaman atau Postingan

Tambahkan kode berikut di dalam postingan Blogger atau di dalam widget Blogger (Tata Letak → Tambah Gadget → HTML/JavaScript):

<button id="openModalBtn" class="btn-open">
    <i class="fas fa-envelope"></i> Verifikasi Email
</button>

<!-- Popup Modal -->
<div id="verificationModal" class="modal">
    <div class="modal-content">
        <span class="btn-close"><i class="fas fa-times"></i></span>
        <h2><i class="fas fa-envelope-circle-check"></i> Kirim Ulang Verifikasi</h2>
        
        <div class="input-container">
            <i class="fas fa-user"></i>
            <input type="email" id="emailInput" class="input-email" placeholder="Masukkan email Anda">
        </div>
        
        <button id="resendVerificationBtn" class="btn-resend">
            <i class="fas fa-paper-plane"></i> Kirim Ulang
        </button>
        <p id="notification" class="notification"></p>
    </div>
</div>

Dengan cara ini, kode tetap ringan, profesional, dan fleksibel untuk dipakai di Blogger! 🚀

Cara Memanggil Popup Fribase Verifikasi Email di Blogger