Kali ini kita akan bermain dengan page 404. Page 404 menandakan bahwa halaman yang dicari pengunjung telah hilang. Hilang yang berarti telah terhapus atau kembali ke dalam folder draft jika di dalam platfrom blogger.com.
Hal yang harus dilakukan oleh kalian pemain blog, wajib melakukan Redirect halaman error tersebut ke hompage atau artikel yang telah diperbaharui dengan konten artikel yang sama.
Cara lainnya adalah Memasang halaman 404 agar pengunjung mengetahui bahwa artikel yang dicari telah dihapus atau dipindahkan.
Halaman 404 sangat berpengaruh terhadap kualitas blog, untuk mengecek ada atau tidaknya halaman 404 pada blog anda, anda bisa melihat artikel sebelumnya mengecek link error pada blog.
Biasanya halaman 404 akan menampilkan sebuah pemberitahuan default tergantung template blogger atau wordpress yang digunakan.
Namun Kali ini kenny akan membagikan source code halaman 404 custom yang bisa kalian terapkan.
Disini kenny tidak memberikan trik memasang source kode halaman 404 pada blogger maupun wordpress, melainkan hanya membagikan source code halaman 404.
Kalian bisa melihat artikel kenny Memasang halaman 404 pada blogger
Membuat halaman 404 source code
Sorce kode halaman 404 ini bisa kalian terapkan pada blogger atau wordpress, tentunya dengan cara-cara kalian sendiri. Karena kenny tidak memeberikan tutorialnya diartikel ini. Silahkan cari artikel yang lainnya untuk pemasangannya.
Berikut ini source code halaman 404 browser unik.
1. Copy code struktur HTML dan paste di dalam notepad atau kalian bisa menggunakan codepen untuk menggunakan teks editor secara online.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 404</title>
<style type="text/css">
:root{
--width: 800px;
--height: 600px;
}
body{
background: rgba(218, 223, 225);
font-family: 'Lato', sans-serif;
}
.explorer{
width: var(--width);
height: var(--height);
background: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 25px rgba(0, 0, 0, .1);
position: relative;
overflow: hidden;
margin: 50px auto;
}
.explorer:before{
content: attr(data-url);
border-top: 30px solid #ebebeb;
border-right: 60px solid #ebebeb;
border-bottom: 15px solid #ebebeb;
border-left: 10px solid #ebebeb;
color: rgba(0, 0, 0, .7);
padding: 5px;
width: 100%;
border-radius: 10px 10px 0 0;
position: absolute;
box-sizing: border-box;
}
.explorer:after{
content: '';
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(239, 72, 54, 1);
box-shadow: 20px 0 0 0 rgba(249, 191, 59, 1), 40px 0 0 0 rgba(38, 194, 129);
top: 8px; left: 10px;
position: absolute;
}
.explorer span{
font-size: 3em;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation-fill-mode: forwards;
}
.explorer span:before{
content: '404';
font-size: 3em;
display: block;
}
@keyframes loading {
from{ box-shadow: calc(-1 * var(--width)) 3px 1px -1px rgba(89, 171, 227, .5); }
to{ box-shadow: 0 3px 1px -1px rgba(89, 171, 227, .7); }
}
@keyframes error {
from{ opacity: 0; }
to{ opacity: 1; }
}
</style>
</head>
<body>
<div class="explorer" data-url="#Kenscripts">
<span>Oops! Halaman yang anda cari telah terhapus.</span>
</div>
<script type="text/javascript">
const explorer = document.querySelector(".explorer");
let i = 0, data = "", url = explorer.getAttribute("data-url");
let typing = setInterval(() => {
if(i == url.length){
clearInterval(typing);
document.styleSheets[0].insertRule('.explorer:before{ animation: loading 2s .5s; }', 0);
document.styleSheets[0].insertRule('.explorer span{ animation: error 3s 2.5s; }', 0);
}else{
data += url[i];
explorer.setAttribute("data-url", data);
i++;
}
}, 200);
</script>
</body>
</html>
2. Simpan dengan format .html jika didalam komputer. Jika menggunakan codepen cukup jalankan saja.
Keterangan :1. 200 : Angka kecepatan animasi tulisan #Kenscripts
2. #Kenscripts : Tulisan yang akan muncul menjadi animasi, kalian bisa merubahnya sesuai selera.
Itulah source code membuat 404 error page custom dengan tampilan unik browser.Halaman 404 wajib ada pada sebuah website atau blog yang menjadikan penanda dan pembritahuaan pada pengunjung bahwa di halaman tersebut terjadi error.
Lihat Juga : 9 Tips Memilih Template Tema Blog
Itu saja yang bisa kenny share semoga dapat memebrikan inspirasi dalam membangun blog anda, terima kasih telah berkunjung.