Cara Menambahkan Custom Error 404 pada Blogger

iNDZGN - Pernahkah kamu menemui halaman tidak ditemukan pada sebuah blog pada saat kamu melakukan riset googling? hal tersebut tentu akan kurang baik untuk pengunjung yang akan membaca sebuah artikel, namun sudah tidak ada pada halaman yang dimaksud. Alhasil pengunjung tersebut akan menutup halaman blog kita dan mencarinya pada blog lain. Bagi kita sendiri, itu juga sangat tidak menguntungkan untuk blog yang kita kelola.

Nah pada kesempatan kali ini, saya akan memberikan sedikit tutorial untuk mempercantik halaman tidak ditemukan pada blog kamu. Mengapa ini perlu? karena jika kamu pernah menghapus sebuah artikel dan masih terindex di google, pengunjung otomatis akan mengklik artikel yang dia cari, dan tertuju pada blog kamu. Namun halaman yang dimaksud sudah dihapus, dan disinilah halaman error 404 yang akan kita design untuk menjadi lebih cantik.

Apa itu Error 404?

Error 404 adalah suatu halaman yang tidak ditemukan pada suatu web atau blog dan server.

Cara Menambahkan Custom Error 404 pada Blogger

1. Buka Blogger kamu, masuk ke Template, kemudian klik Edit HTML, dan tambahkan kode di bawah ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
/* CSS Error 404 indzgn.blogspot.com */
#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 == &quot;error_page&quot;'>
<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. Langkah terakhir, simpan template kamu dan silahkan dicoba.