Pernah gak sih kamu lagi asyik browsing terus tiba-tiba ketemu tulisan error warna hitam putih yang kaku banget? Kebanyakan orang pasti langsung nutup tab browser kalau ngeliat tampilan kaya gitu.
Nah, di sinilah pentingnya halaman error kustom. Selain bikin tampilan website kamu makin profesional, halaman unik ini bisa menjaga pengunjung biar tetep betah dan nemuin jalan kembali ke halaman utama.
Buat kamu yang pernah baca panduan tentang web server android wordpress, ngatur halaman error kustom ini adalah langkah lanjutan yang pas banget buat makin mempercantik performa dan estetika website kamu.
3 Kode Halaman Error Kustom Unik dan Lucu
Di sini aku udah nyiapin tiga kode kustom buat status error yang paling sering atau unik ditemuin, yaitu 404, 429, dan 418. Semua kodenya udah didesain responsif, fleksibel, dan ramah di layar HP maupun laptop.
1. Error 404 Page Not Found (Tema Kucing Imut)
Gaya ini pakai pendekatan visual yang manis dan ramah. Pas banget buat mencairkan suasana saat pengunjung nyasar ke halaman yang gak ada.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Halaman Hilang!</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #ffeef2;
color: #4a4a4a;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
padding: 20px;
}
.card {
background: #ffffff;
padding: 40px 30px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
max-width: 450px;
width: 100%;
}
.icon { font-size: 80px; margin-bottom: 10px; }
h1 { font-size: 48px; color: #ff6b81; margin-bottom: 10px; }
p { font-size: 16px; margin-bottom: 25px; line-height: 1.5; }
a {
display: inline-block;
background: #ff6b81;
color: #fff;
padding: 12px 25px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s;
}
a:hover { background: #ff4757; }
</style>
</head>
<body>
<div class="card">
<div class="icon">🐾</div>
<h1>404</h1>
<p>Duh, sepertinya halaman yang kamu cari udah hilang atau pindah lapak nih.</p>
<a href="/">Kembali ke Beranda</a>
</div>
</body>
</html>
2. Error 429 Too Many Requests (Tema Chill & Santai)
Error 429 muncul kalau ada terlalu banyak permintaan dalam waktu singkat. Tema ini ngasih tahu pengunjung buat istirahat sejenak dengan bahasa yang santai.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>429 - Pelan-pelan Aja!</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #e3f2fd;
color: #333;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
padding: 20px;
}
.box {
background: #ffffff;
padding: 40px 30px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
max-width: 450px;
width: 100%;
}
.icon { font-size: 80px; margin-bottom: 10px; }
h1 { font-size: 44px; color: #2196f3; margin-bottom: 10px; }
p { font-size: 16px; margin-bottom: 25px; line-height: 1.5; }
button {
background: #2196f3;
color: #fff;
border: none;
padding: 12px 25px;
border-radius: 25px;
font-weight: bold;
cursor: pointer;
font-size: 15px;
}
button:hover { background: #1e88e5; }
</style>
</head>
<body>
<div class="box">
<div class="icon">☕</div>
<h1>429</h1>
<p>Waduh, kamu terlalu cepat kliknya! Istirahat sebentar seruput kopi dulu aja ya.</p>
<button onclick="location.reload()">Coba Muat Ulang</button>
</div>
</body>
</html>
3. Error 418 I'm a Teapot (Tema Humor & Teapot)
HTTP 418 ini sebenarnya Easter Egg klasik di dunia web. Pas banget dihiasi tema cangkir teh yang kocak dan menghibur.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>418 - Aku Cangkir Teh!</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f3e5f5;
color: #4a148c;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
padding: 20px;
}
.card {
background: #ffffff;
padding: 40px 30px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
max-width: 450px;
width: 100%;
}
.icon { font-size: 80px; margin-bottom: 10px; }
h1 { font-size: 44px; color: #ab47bc; margin-bottom: 10px; }
p { font-size: 16px; margin-bottom: 25px; line-height: 1.5; }
a {
display: inline-block;
background: #ab47bc;
color: #fff;
padding: 12px 25px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
}
a:hover { background: #8e24aa; }
</style>
</head>
<body>
<div class="card">
<div class="icon">🫖</div>
<h1>418</h1>
<p>Maaf banget, server ini cuma cangkir teh biasa dan gak bisa bikin kopi!</p>
<a href="/">Kembali Pulang</a>
</div>
</body>
</html>
Cara Memasang Kode di Web Server Nginx
Memasang file HTML kustom ini gak sulit sama sekali. Kamu bisa ikuti langkah ringkas di bawah ini biar halaman error langsung aktif di server Nginx kamu.
1. Simpan File HTML
Buat folder atau langsung simpan kode di atas jadi file HTML terpisah di server kamu, contohnya seperti ini.
error-page-404.html
— File html 404
error-page-429.html
— File html 429
error-page-418.html
— File html 418
Letakkan file-file tersebut di dalam direktori root website kamu, misalnya di /var/www/page/.
2. Edit Konfigurasi Nginx
Buka file konfigurasi blok Nginx domain kamu, lalu tambahkan petunjuk pengalihan error di dalam blok server.
server {
listen 80;
server_name websitekamu.com;
root /var/www/html;
error_page 404 /error-page-404.html;
error_page 429 /error-page-429.html;
error_page 418 /error-page-418.html;
location = /error-page-404.html {
internal;
}
location = /error-page-429.html {
internal;
}
location = /error-page-418.html {
internal;
}
}
3 Restart Nginx
Setelah simpan konfigurasi, cek dulu apakah ada yang salah ketik dengan perintah sudo nginx -t. Kalau udah aman, tinggal muat ulang Nginx pakai sudo systemctl reload nginx. Sekarang halaman error unik kamu udah siap menyapa pengunjung!
Membikin halaman error kustom emang keliatan kaya hal kecil, tapi dampaknya kerasa banget buat pengalaman pengunjung website kamu. Dengan sentuhan desain yang ramah dan unik, pengunjung gak bakal kecewa waktu nemuin kendala pas akses halaman.
Gimana, gampang banget kan cara buat dan pasangnya? Menurut kamu dari ketiga desain di atas, mana nih yang paling cocok sama tema website kamu? Kabarin Liaviora di kolom komentar ya!
