Cara Membuat Fitur Login Modern & Responsif di Blogger Tanpa Coding
Cara Membuat Fitur Login Modern & Responsif di Blogger Tanpa Coding Rumit
Memberikan pengalaman interaktif bagi pengunjung adalah salah satu cara terbaik untuk meningkatkan user engagement di blog. Salah satu fitur yang membuat sebuah blog terlihat profesional dan futuristik adalah adanya
Widget Login Pengunjung
Meskipun platform Blogger (Blogspot) tidak memiliki sistem *user database* bawaan seperti WordPress, Anda tetap bisa memasang fitur login yang interaktif, ringan, dan menarik.
Pada artikel tutorial kali ini, warkasa1919.my.id akan membagikan panduan langkah demi langkah cara membuat widget login berdesain Glassmorphic yang canggih, responsif di HP/PC, dan sangat mudah dipasang.
Fitur Utama Widget Login Ini
Desain Glassmorphism Modern: Tampilan pop-up dengan efek transparan blur yang futuristik.
100% Responsif: Menyesuaikan tampilan di layar smartphone, tablet, maupun desktop.
Tanpa Backend / Database Tambahan: Memanfaatkan *Local Storage* browser bawaan, sehingga blog Anda tetap aman dan **loading sangat cepat**.
Fitur Tab Masuk & Daftar: Pengunjung bisa mendaftarkan nama/username mereka langsung di blog Anda.
Profil Otomatis: Menampilkan *Avatar Inisial* dan menyapa pengunjung saat mereka kembali membuka blog Anda.
Cara Memasang Widget Login di Blogger
Anda tidak perlu membongkar atau mengubah struktur kode tema (HTML) blog Anda secara rumit. Cukup manfaatkan fitur Tata Letak (Layout) bawaan Blogger.
Langkah 1: Buka Tata Letak Blogger
1. Masuk ke Dashboard Blogger Anda.
2. Pilih menu Tata Letak (Layout) di panel sebelah kiri.
3. Klik Tambah Gadget (Add Gadget) pada posisi yang Anda inginkan (disarankan pada bagian Sidebar atau Header).
4. Pilih opsi HTML/JavaScript.
Langkah 2: Salin & Tempel Kode Widget
Salin (copy) seluruh kode HTML, CSS, dan JavaScript di bawah ini, lalu tempel (paste) ke dalam kolom **Konten** pada gadget tersebut:
```html
<!-- ============================================ -->
<!-- WIDGET LOGIN MODERN BY WARKASA1919.MY.ID -->
<!-- ============================================ -->
<!-- 1. Style CSS Glassmorphism & Responsive -->
<style>
:root {
--primary-color: #6366f1;
--primary-hover: #4f46e5;
--bg-glass: rgba(15, 23, 42, 0.85);
--border-glass: rgba(255, 255, 255, 0.15);
--text-color: #f8fafc;
}
.simple-auth-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Tombol Pembuka Modal */
.auth-trigger-btn {
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 30px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.auth-trigger-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}
/* Kartu Profil Setelah Login */
.auth-profile-card {
display: inline-flex;
align-items: center;
gap: 12px;
background: #1e293b;
padding: 6px 14px 6px 8px;
border-radius: 30px;
border: 1px solid var(--border-glass);
color: var(--text-color);
}
.auth-profile-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #a855f7);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
}
.auth-logout-btn {
background: transparent;
border: none;
color: #ef4444;
cursor: pointer;
font-size: 12px;
font-weight: 600;
margin-left: 5px;
}
/* Modal Popup Overlay */
.auth-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 999999;
justify-content: center;
align-items: center;
padding: 20px;
}
.auth-modal-overlay.active {
display: flex;
animation: authFadeIn 0.3s ease;
}
/* Form Container */
.auth-glass-box {
background: var(--bg-glass);
border: 1px solid var(--border-glass);
border-radius: 20px;
padding: 30px;
width: 100%;
max-width: 380px;
color: var(--text-color);
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
position: relative;
box-sizing: border-box;
}
.auth-close-btn {
position: absolute;
top: 15px;
right: 20px;
background: none;
border: none;
color: #94a3b8;
font-size: 24px;
cursor: pointer;
}
.auth-title {
margin: 0 0 20px 0;
font-size: 20px;
text-align: center;
font-weight: 700;
}
.auth-tabs {
display: flex;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 4px;
margin-bottom: 20px;
}
.auth-tab {
flex: 1;
background: transparent;
border: none;
color: #94a3b8;
padding: 8px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 13px;
transition: all 0.2s;
}
.auth-tab.active {
background: var(--primary-color);
color: #fff;
}
.auth-field {
margin-bottom: 15px;
}
.auth-field label {
display: block;
font-size: 12px;
color: #94a3b8;
margin-bottom: 6px;
}
.auth-input {
width: 100%;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-glass);
border-radius: 10px;
color: #fff;
font-size: 14px;
box-sizing: border-box;
outline: none;
}
.auth-input:focus {
border-color: var(--primary-color);
}
.auth-submit-btn {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #6366f1, #a855f7);
color: #fff;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}
@keyframes authFadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
</style>
<!-- 2. Struktur Elemen HTML -->
<div class="simple-auth-wrapper">
<div id="authWidgetStatus"></div>
<div id="authModal" class="auth-modal-overlay">
<div class="auth-glass-box">
<button class="auth-close-btn" onclick="closeAuthModal()">×</button>
<h3 class="auth-title">Akses Pengunjung</h3>
<div class="auth-tabs">
<button id="tabLogin" class="auth-tab active" onclick="switchTab('login')">Masuk</button>
<button id="tabRegister" class="auth-tab" onclick="switchTab('register')">Daftar</button>
</div>
<form id="authForm" onsubmit="handleAuthSubmit(event)">
<div id="nameField" class="auth-field" style="display: none;">
<label>Nama Lengkap</label>
<input type="text" id="authName" class="auth-input" placeholder="Nama Anda">
</div>
<div class="auth-field">
<label>Username / Email</label>
<input type="text" id="authUser" class="auth-input" placeholder="User123" required>
</div>
<div class="auth-field">
<label>Kata Sandi</label>
<input type="password" id="authPass" class="auth-input" placeholder="••••••••" required>
</div>
<button type="submit" id="authSubmitText" class="auth-submit-btn">Masuk Sekarang</button>
</form>
</div>
</div>
</div>
<!-- 3. JavaScript Logika -->
<script>
let currentTab = 'login';
function openAuthModal() {
document.getElementById("authModal").classList.add("active");
}
function closeAuthModal() {
document.getElementById("authModal").classList.remove("active");
}
function switchTab(type) {
currentTab = type;
const nameField = document.getElementById("nameField");
const submitBtn = document.getElementById("authSubmitText");
const tabLogin = document.getElementById("tabLogin");
const tabRegister = document.getElementById("tabRegister");
if (type === 'register') {
nameField.style.display = 'block';
submitBtn.innerText = 'Buat Akun Baru';
tabRegister.classList.add('active');
tabLogin.classList.remove('active');
} else {
nameField.style.display = 'none';
submitBtn.innerText = 'Masuk Sekarang';
tabLogin.classList.add('active');
tabRegister.classList.remove('active');
}
}
function handleAuthSubmit(e) {
e.preventDefault();
const user = document.getElementById("authUser").value.trim();
const pass = document.getElementById("authPass").value;
const name = document.getElementById("authName").value.trim() || user;
if (currentTab === 'register') {
const userData = { username: user, password: pass, name: name };
localStorage.setItem('user_account_' + user, JSON.stringify(userData));
localStorage.setItem('session_user', JSON.stringify(userData));
alert("Pendaftaran berhasil! Selamat datang, " + name);
} else {
const savedUser = localStorage.getItem('user_account_' + user);
if (savedUser) {
const parsed = JSON.parse(savedUser);
if (parsed.password === pass) {
localStorage.setItem('session_user', JSON.stringify(parsed));
} else {
alert("Kata sandi yang Anda masukkan salah!");
return;
}
} else {
const tempUser = { username: user, name: user };
localStorage.setItem('session_user', JSON.stringify(tempUser));
}
}
closeAuthModal();
renderAuthStatus();
}
function logoutUser() {
localStorage.removeItem('session_user');
renderAuthStatus();
}
function renderAuthStatus() {
const statusContainer = document.getElementById("authWidgetStatus");
const sessionData = localStorage.getItem('session_user');
if (sessionData) {
const user = JSON.parse(sessionData);
const initial = user.name.charAt(0).toUpperCase();
statusContainer.innerHTML = `
<div class="auth-profile-card">
<div class="auth-profile-avatar">${initial}</div>
<span style="font-size:13px; font-weight:600;">Halo, ${user.name}</span>
<button class="auth-logout-btn" onclick="logoutUser()">[Keluar]</button>
</div>
`;
} else {
statusContainer.innerHTML = `
<button class="auth-trigger-btn" onclick="openAuthModal()">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg>
Masuk / Daftar
</button>
`;
}
}
document.addEventListener("DOMContentLoaded", renderAuthStatus);
</script>
```
Langkah 3: Simpan dan Uji Coba
1. Klik tombol **Simpan** pada Gadget.
2. Klik ikon **Simpan** di pojok kanan bawah halaman Tata Letak Blogger.
3. Buka halaman utama blog Anda, lalu lakukan tes klik pada tombol **Masuk / Daftar**.
Kesimpulan
Membuat blog terlihat interaktif tidak selalu membutuhkan server atau basis data mahal. Dengan mengombinasikan CSS modern dan JavaScript local storage, Anda bisa menghadirkan fitur login pengunjung berdesain premium di warkasa1919.my.id dengan sangat praktis.
Jika Anda memiliki pertanyaan seputar pemasangan kode di atas, silakan tinggalkan pesan pada kolom komentar di bawah!
