Merubah tampilan custom halaman error 404 pada blogger

Apasih yang dimaksut Halaman error 404 ?
Sebelum ke tutorial, alangkah baiknya jika kita membahas sekilas tentang apa itu halaman error 404.

Pengertian Halaman error 404 pada blogger

Halaman error 404 adalah halaman yang ditampilkan dimana kondisi halaman yang di tuju tidak bisa diakses.

Entah halaman yg di tuju tersebut disembunyikan (private access) oleh admin. Atau bisa jadi alamat halaman yang dituju sudah di pindahkan atau mungkin sudah di hapus.

Bisa juga di karenakan kesalahan dalam menulis link halaman yang di tuju, satu saja kesalahan huruf dalam penulisan link. Maka berdampak menuju halaman error 404.

Meski pada blogger fitur halaman 404 sudah ada dan dapat diatur melalui pengaturan pengguna, namun bagi saya itu kurang profesional.

Kenapa ?
Selain terlalu simpel, Ya bagi saya halaman 404 yg profesional bisa jadi menunjukkan kalau blog itu juga blog profesioanal.

cara membuat custom halaman error 404

Caranya cukup mudah dan simpel. Anda hanya perlu menambahkan tag error css dan kode html 404 berikut ini ke dalam template xml blogger kamu.

Untuk tag error css, taruh tersendiri di dalam tag head.
Jangan taruh di kumpulan css.
Karena ini berupa tag conditional blogger tersendiri / kusus.

Lebih mudahnya taruh sebelum kode </head>

tag error css 404 :

<b:if cond='data:view.isError'>
<style>
@import url(&#39;https://fonts.googleapis.com/css?family=Ropa+Sans&#39;);
#header-wrapper, #outer-wrapper, #sidebar-wrapper, #main-wrapper, #footer-wrapper {display:none}
body,html {overflow:hidden; margin:0; padding:0; width:100%; min-height:100vh}
body {background:#eceff5; color:#394E64;font-family:&#39;Ropa Sans&#39;,sans-serif;}
#colongan404 {background:#eceeee; text-align:center; margin:auto; font-weight:700; font-size:45px; position:fixed; width:100%; height:100%; line-height:1.25em; z-index:9999;}
#colongan404 #error-text {position:relative; font-size:40px; color:#394E64; top:50%; right:50%; transform:translate(50%,-50%);}
#colongan404 #error-text a {color:#394E64; text-decoration:none}
#colongan404 #error-text p {margin:0!important; letter-spacing:.5px;}
#colongan404 #error-text p.periksa {font-size:16px;line-height:1.25em;}
#colongan404 #error-text span {color:#45A6A6;font-size:100px;}
#colongan404 #error-text a.back {background:#45A6A6;color:#fff;padding:10px 20px;font-size:20px;border:double #fff;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all 0.5s ease-out;}
#colongan404 #error-text a.back:hover {background:#394E64;color:#fff;border:double #eceeee;}
#colongan404 #error-text a.back:active {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);background:#394E64;color:#fff;border:double #eceeee;}
#colongan404 #error-text #copyright {font-size:16px}
#colongan404 #error-text #copyright a {color:#45A6A6}
/* responsive ----------------- */
@media only screen and (max-width:640px){
#colongan404 #error-text {font-size:20px;}
#colongan404 #error-text span {font-size:60px;}
#colongan404 #error-text a.back {padding:5px 10px;font-size:15px;}
#colongan404 #error-text a.back:hover, #colongan404 #error-text a.back:active {border:0;}
}
</style>
</b:if>

sesuaikan dengan div id template km

Untuk kode htmlnya, taruh saja di body paling bawah di template kamu.
Lebih akurat taruh sebelum kode </body>

kode html 404 :

<b:if cond='data:blog.pageType == "error_page"'>
<div id='colongan404'> 
<div id='error-text'>
  <span>404</span> <p>Upss, Halaman tidak ada !</p> 
<p class='periksa'>periksa apakah kamu tidak <b style='color:#E85454'>salah tulis</b> link</p>
<p class='periksa'>atau mungkin halaman sudah <b style='color:#E85454'>dihapus</b> oleh Admin</p>
<p><a class='back' expr:title='data:blog.title' href='/'>Kembali Ke Halaman Awal</a></p> 
<div id='copyright'> <a expr:title='data:blog.title' href='/'><data:blog.title/></a> &#169; 2018 - <script>document.write(new Date().getFullYear())</script>. All Rights Reserved </div> 
</div> 
</div> 
</b:if>

Silahkan sesuaikan dengan warna dan keterangan template blog kamu.

Demo tampilan berupa gambar seperti berikut ini.

Demo langsung DISINI.

Jika tidak dapat berhasil seperti contoh di atas, coba teliti lagi nama-nama struktur div id pada css diatas sama apa tidak dengan nama div id struktur template blog kamu.

Contoh dan pengertian struktur template bisa kamu lihat dan kamu pelajari DISINI.
Sekian tutorial kali ini.

jika ada yang kurang jelas maupun bla bla bla... silahkan coret-coret di kolom komentar.

mungkin juga kamu tertarik untuk membaca ini :

Terima kasih, salam Colongan !

Bantu kami lebih baik lagi.
Apa Reaksi anda tentang blogger :
"Merubah tampilan custom halaman error 404 pada blogger" ?