Hal ini akan kurang baik jika pengguna yang mengunjungi blog Anda dan mendapatkan kesalahan 404 atau halaman tidak ditemukan. Hal ini dapat terjadi karena berbagai macam alasan seperti URL yang salah ketik, masalah indeks atau halaman yang dicari sudah dihapus pengelola blog. Dalam artikel ini Saya akan menunjukkan cara untuk menambahkan halaman khusus error 404 di blog Anda.
Apa itu Error 404?
Error 404 adalah sebuah halaman yang tidak ditemukan di suatu web dan server.
Berikut cara menambahkan custom error 404 di blogger
1. Buka Blogger Anda > Klik Template > Edit html > Tambahkan kode di bawah ini di atas kode
</head>
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
/* CSS Error 404 */
#oopss{background:#222;text-align:center;margin-bottom:50px;font-weight:400;font-size:20px;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;left:0}#error-text{top:30%;position:relative;font-size:40px;color:#eee}#error-text a{color:#eee}#error-text a:hover{color:#fff}#error-text p{color:#eee;margin:70px 0 0}#error-text i{margin-left:10px}#error-text p.hmpg{margin:40px 0 0}#error-text span{position:relative;background:#ef4824;color:#fff;font-size:300%;padding:0 20px;border-radius:5px;font-weight:bolder;transition:all .5s;cursor:pointer;margin:0 0 40px}#error-text span:hover{background:#d7401f;color:#fff;-webkit-animation:jelly .5s;-moz-animation:jelly .5s;-ms-animation:jelly .5s;-o-animation:jelly .5s;animation:jelly .5s}#error-text span:after{top:100%;left:50%;border:solid transparent;content:'';height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-top-color:#ef4824;border-width:7px;margin-left:-7px}.back:active{-webkit-transform:scale(.95);-moz-transform:scale(.95);transform:scale(.95);background:#f53b3b;color:#fff}.back:hover{background:#4c4c4c;color:#fff}.back{text-decoration:none;background:#5b5a5a;color:#fff;padding:10px 20px;font-size:20px;font-weight:700;line-height:normal;text-transform:uppercase;border-radius:3px;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all .5s ease-out}@-webkit-keyframes jelly{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}@keyframes jelly{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}@media only screen and (max-width:640px){#error-text span{font-size:200%}#error-text a:hover{color:#fff}}
</style>
</b:if>
2. Selanjutnya tambahkan kode di bawah ini tepat di bawah kode
<body>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='oopss'>
<div id='error-text'>
<span>404</span>
<p>PAGE NOT FOUND</p>
<p class='hmpg'><a expr:href='data:blog.homepageUrl' class="back">Back To Home</a></p>
</div>
</div>
</b:if>
3. Selesai, silakan klik tombol demo untuk melihat hasilnya.
