Membuat Tampilan Halaman Error 404 di Blog Menjadi Keren

Santos el Salam

14 November 2020

Munculnya halaman error di blog menjadi salah satu hal yang dihindari oleh blogger. Halaman Error 404 terjadi karena link yang dikunjungi pembaca tidak ditemukan sehingga menghasilkan halaman error atau not found. Biasanya, hal ini disebabkan oleh postingan yang telah dihapus baik disengaja atau tidak, baik dari link eksternal maupun link internal. Tidak hanya itu saja, link yang telah diubah juga bisa menghasilkan halaman error jika tidak segera diatasi. 

Untuk halaman error yang terjadi karena masalah-masalah di atas memang sebaiknya segera diatasi agar tidak semakin berdampak buruk bagi blog. Namun selain sebab-sebab di atas, halaman error ternyata juga bisa terjadi karena hal lain. Salah satunya yaitu kesalahan penulisan link. Saat pengunjung sedang menuliskan link halaman blog pada address bar, tidak menutup kemungkinan terjadi salah ketik, meskipun hanya satu huruf, sehingga ketika dibuka justru muncul halaman error. 

Sebagai contoh misalnya mereka hendak memasukkan link seperti berikut ini:

https://contohsaja.blogspot.com/2020/02/cara-membuat-tampilan-halaman-error-menjadi-keren.html

Namun secara tidak sengaja kepencet satu huruf masuk ke dalam link tersebut sehingga menjadi seperti berikut ini:

https://contohsaja.blogspot.com/2020/02/cara-membuat-tampilan-halamang-error-menjadi-keren.html

Ketika dibuka, hasilnya pun halaman tersebut juga menjadi error 404 alias tidak ditemukan. Biasanya tampilannya seperti berikut ini:

Contoh halaman error

Nah, agar tampilan halaman error ini tidak semakin mengganggu, kita bisa mengganti tampilan tersebut dengan script khusus agar tampilannya lebih menarik, dengan harapan pengunjung mau kembali mengunjungi blog kita. Script ini saya dapat dari blog Arlinacode dengan tampilan keren berupa gambar ombak bergerak. Dilengkapi pula dengan tombol menuju homepage sehingga pengunjung diarahkan kembali menuju halaman muka blog kita. Tampilannya seperti screenshot berikut ini:

Bagaimana cara membuatnya?, simak langkah-langkah di bawah ini.

Cara Membuat Tampilan Halaman Error 404 Menjadi Keren

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode </head> dan letakkan kode berikut ini di atasnya. 

<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%} .arlinacode,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)}} .arlinacode__content{color:#fff;font-weight:300;padding:0 2rem} .arlinacode__content,.arlinacode__footer{width:100%;position:relative;z-index:100} .arlinacode,.arlinacode__content,.arlinacode__footer{display:flex;align-items:center;justify-content:center} .arlinacode,.arlinacode__content{flex-direction:column} .arlinacode__footer{flex-wrap:wrap;max-width:600px;opacity:0;animation:charge .5s .5s forwards} .arlinacode__subtitle,.arlinacode__title{margin:0} .arlinacode__footer a{text-decoration:none;width:40%;padding:12px 18px;font-size:16px;margin:20px auto 0 auto;cursor:pointer;color:#fff;border:2px solid;border-radius:99em;outline:none;transition:all .3s} .arlinacode__footer a:active,.arlinacode__footer a:focus,{outline:none} .arlinacode__footer a:hover{background-color:#fff;color:#222;border-color:#fff} .arlinacode__subtitle,.arlinacode__text,.arlinacode__title{backface-visibility:hidden} .arlinacode__title{font-size:2.4rem;font-weight:700;opacity:0;animation:charge .5s forwards} .arlinacode__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} .arlinacode{position:relative;background-color:#74b9ff;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){.arlinacode__title{font-size:3.4rem;margin:0 auto 20px auto}.arlinacode__text{font-size:1.5rem}} </style> </b:if>

4. Selanjutnya cari kode <body> dan letakkan kode berikut ini di bawahnya. 

<b:if cond='data:view.isError'>

<div class='arlinacode'>

  <header class='arlinacode__content'>

    <h1 class='arlinacode__title'>ERROR 404</h1>

    <div class='arlinacode__text'>The page you were trying to visit has disappeared or moved to another dimension.</div>

  </header>

  <footer class='arlinacode__footer'>

    <a class='ripple tombol' expr:href='data:blog.homepageUrl'>Back to Homepage</a>

  </footer>

  <div class='wave'/>

  <div class='wave wave2'/>

  <div class='wave wave3'/>

</div>

</b:if>

5. Simpan kembali template anda. 

Untuk melihat hasilnya, anda bisa coba melakukannya seperti cara (salah pencet) di atas. Bagaimana hasilnya?. Keren bukan. Kalau anda ingin halaman error agar langsung dialihkan menuju halaman homepage (beranda) secara otomatis, silahkan baca postingan ini: Cara Mengalihkan (Redirect) Halaman Error 404 Menuju Homepage Blog

Labels: Blogging

Thanks for reading Membuat Tampilan Halaman Error 404 di Blog Menjadi Keren. Please share...!

Facebook

Twitter