Mengelola akses pengguna pada situs web adalah aspek penting dalam mengelola konten yang terbatas hanya untuk pengguna terdaftar atau berlangganan. Salah satu cara yang efektif untuk memastikan bahwa pengunjung masuk atau mendaftar sebelum mengakses konten tertentu adalah dengan menggunakan banner layar penuh yang menutupi seluruh halaman hingga pengguna login. Artikel ini akan membahas bagaimana Anda dapat menerapkan fitur ini pada situs web Anda.
Konsep Dasar
Banner layar penuh adalah elemen HTML yang menutupi seluruh layar browser pengguna, menampilkan pesan yang mengarahkan mereka untuk masuk atau mendaftar sebelum dapat melanjutkan. Fitur ini sangat berguna pada situs web yang menawarkan konten premium, komunitas terbatas, atau layanan berlangganan, di mana hanya pengguna yang sudah login yang dapat mengakses konten tersebut.
Tampilan
Berikut adalah tampilan halaman yang ditutupi oleh banner, untuk pengguna yang belum masuk (login) ke dalam situs.
Untuk tampilan halaman bagi user yang sudah masuk, tidak ada perubahan apapun. Tampilan nya seperti halaman biasa.
Penerapan
Gunakan Smart Conditional Logic dari WPCode untuk membuat agar banner ini hanya ditampilan untuk pengguna yang log-out, dan hanya berlaku pada halaman tertentu.
Kegunaan
Script ini berfungsi untuk memastikan bahwa hanya pengguna yang sudah login yang dapat mengakses konten tertentu di situs WordPress. Dengan menampilkan banner layar penuh kepada pengguna yang belum login, script ini secara efektif mendorong mereka untuk melakukan login atau mendaftar sebelum dapat melanjutkan.
Hal ini sangat berguna untuk situs yang memiliki konten premium, area khusus anggota, atau halaman yang membutuhkan autentikasi sebelum akses. Selain itu, script ini membantu dalam menjaga keamanan dan eksklusivitas konten yang ditawarkan oleh situs.
Script
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Menunggu</title>
<style>
.full-screen-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1); /* Warna putih dengan transparansi 80% */
color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 9999;
padding: 20px;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #fff;
color: #333;
text-align: center;
}
.container {
max-width: 400px;
padding: 20px;
}
.button {
display: inline-block;
padding: 10px 20px;
margin-top: 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #28a745;
border: none;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
}
.button:hover {
background-color: #218838;
}
.logo {
max-width: 150px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="full-screen-banner">
<div class="container">
<!-- Logo ditambahkan di sini -->
<img src="https://skripsiexpress.com/joki-skripsi/wp-content/uploads/2024/06/Skipsi-Express-PP1.png" alt="Logo Skripsi Express" class="logo">
<p>Mohon masuk atau mendaftar terlebih dahulu, lalu <strong><a href="#" onclick="location.reload()">muat ulang</a></strong> halaman ini untuk dapat mengaksesnya.</p>
<a href="https://skripsiexpress.com/joki-skripsi/akun/" class="button" target="_blank" rel="noopener">Masuk / Mendaftar</a>
</div>
</div>
</body>
</html>
Penutup
Dengan menerapkan banner layar penuh ini, pemilik situs WordPress dapat lebih mudah mengontrol akses pengguna, memberikan pengalaman yang terstruktur, dan memastikan bahwa hanya pengguna yang berwenang yang dapat mengakses konten tertentu. Ini merupakan langkah efektif dalam meningkatkan interaksi pengguna sekaligus melindungi konten penting di dalam situs.
