Cara Membuat Halaman Error 404 Page Not Found Dengan Efek Animasi Gelombang Keren Di blogger
16 September 2020
Tulis Komentar
Halaman Error 404 atau Page Not Found adalah tampilan halaman yang fungsinya memberitahui pengunjung suatu website bahwa halaman yang mereka sedang dari tidak tersedia baik itu telah di hapus atau telah di ubah tanggal publikasinya, bisa juga klik alamat blog dengan kesalahan penulisan pada alamat yang dikunjungi bisa membuat halaman error 404 'page not found'.
Sebenarnya pada blogger Halaman Error 404 sudah di sediakan dengan tampilan default. Dengan mengganti tampilan halaman default yang diberikan blogger dengan tampilan yang keren disertasi efek mave animasi gelombang membuat tampilan Halaman Error 404 atau Page Not Found menjadi lebih menarik dan berbeda tentunya. Ok, langsung saja ikuti langkah-langkah di bawah ini.
Memasang Halaman Error 404 ( Page Not Found ) Keren di Blogger
1. Pertama login buka Blogger > Kemudian pilih menu Tema > Klik Edit HTML.
2. Cari kode </head> tambahkan kode dibawah ini tepat di atas atau sebelum kode </head>.
<b:if cond='data:view.isError'>
<style>
*,*::before,*::after{box-sizing:border-box}
html,body{font-size:12px;overflow:hidden;text-align:center;line-height:1.4;overflow:hidden;width:100%}
.indws,html,body{height:100vh}
@keyframes charge{from{transform:translateY(2rem);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes wave{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.indws__content{color:#fff;font-weight:300;padding:0 2rem}
.indws__content,.indws__footer{width:100%;position:relative;z-index:100}
.indws,.indws__content,.indws__footer{display:flex;align-items:center;justify-content:center}
.indws,.indws__content{flex-direction:column}
.indws__footer{flex-wrap:wrap;max-width:600px;opacity:0;animation:charge .5s .5s forwards}
.indws__subtitle,.indws__title{margin:0}
.indws__footer a{text-decoration:none;width:40%;padding:10px 18px;font-size:16px;margin:20px auto 0 auto;cursor:pointer;color:#fff;border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.indws__footer a:active,.indws__footer a:focus,{outline:none}
.indws__footer a:hover{background-color:#fff;color:#222;border-color:#fff}
.indws__subtitle,.indws__text,.indws__title{backface-visibility:hidden}
.indws__title{font-size:2.4rem;font-weight:700;opacity:0;animation:charge .5s forwards}
.indws__text{max-width:50rem;font-weight:normal;padding:2rem 0;font-size:1.3rem;color:rgba(255,255,255,.9);opacity:0;animation:charge .5s .3s forwards}
.wave{opacity:.6;position:absolute;bottom:40%;left:50%;width:6000px;height:6000px;background:#000;margin-left:-3000px;transform-origin:50% 48%;border-radius:46%;animation:wave 12s infinite linear;pointer-events:none}
.wave2{animation:wave 28s infinite linear;opacity:.3}
.wave3{animation:wave 20s infinite linear;opacity:.1}
.wave{background:#000}
.indws{position:relative;background-color:#21839c;z-index:999}
.ripple{background-position:center;transition:background 0.8s}
.ripple:hover{background:#37474F radial-gradient(circle,transparent 1%,#263238 1%) center/15000%}
.ripple:active{background-color:#37474F;background-size:100%;transition:background 0s}
@media (min-width:768px){.indws__title{font-size:3.4rem;margin:0 auto 20px auto}.indws__text{font-size:1.5rem}}
</style>
</b:if>3. Selanjutnya kalian cari kode <body> kemudian letakkan kode dibawah ini tepat di bawah kode <body>.
<b:if cond='!data:view.isError'>
</b:if>
<b:if cond='data:view.isError'>
<div class='indws'>
<header class='indws__content'>
<h1 class='indws__title'>ERROR 404</h1>
<div class='indwz__text'>The page you were trying to visit has disappeared or moved to another dimension.</div>
</header>
<footer class='indws__footer'>
<a expr:href='data:blog.homepageUrl' class='ripple tombol'>Back to Homepage</a>
</footer>
<div class='wave'/>
<div class='wave wave2'/>
<div class='wave wave3'/>
</div>
</b:if>4. Langkah terakhir Simpan tema dan Selesai.
Untuk melihat hasil dari tampilan halam error 404 atau page not found yang sudah kalian buat dengan menambahkan /error404 tepat di belakang URL kalian seperti di bawah ini.
Https://www.NamaBlog.com/error404Itulah sedikit tips dari saya tentang cara membuat halaman error 404 di blogger dengan efek gelombang. Cukup mudah kan, jangan lupa share artikel ini jika bermanfaat. Selamat mencoba!
