Menambahkan Custom Error 404 Di Blogger

Pada kali ini saya bakal mengajarkan kepada Kalian bagaimana Cara Menambahkan Custom Error 404 di Blogger yang berfungsi selaku halaman penanda kalau halaman yang tengah diakses oleh pengunjung tidak ditemukan pada suatu web atau server.

Error 404 memang merupakan hal yang tidak baik jika pengunjung situs mendapatkan kesalahan 404 atau halaman tidak ditemukan pada situs blog anda. Hal ini bisa disebabkan sebab beberapa faktor, misalnya dikala pengunjung mengadakan kesalahan pengetikan alamat url, atau pengunjung mencoba mengunjungi halaman yang tidak terdaftar pada situs blog anda, bisa juga sebab alamat url yang tengah dikunjungi pengunjung ternyata telah dihapus.

Baca Juga

Dengan membuat custom error 404 pada blog, pengunjung bisa tahu kalau alamat url yang tengah diakses ternyata tidak terdaftar. Untuk pembuatannya, silahkan ikuti langkah-langkahnya dibawah ini.

Cara Menambahkan Custom Error 404 di Blogger

Langkah 1 - Silahkan buka halaman dasbor Blogger, kemudian klik Template > Edit HTML > Tambahkan kode dibawah ini tepat diatas kode </head>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'> <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>

Langkah 2 - Selanjutnya, silahkan salin kode dibawah ini serta letakan dibawah 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>

Pada tahap ini Kalian telah berhasil membuat custom error 404 di blogger. Untuk mengadakan pengujian, silahkan kunjungi halaman yang tidak tersedia di situs blog anda.

Baca Juga: Cara Redirect Page Not Found ke Halaman Baru

Demikian pembahasan mengenai Cara Menambahkan Custom Error 404 di Blogger dari , semoga bermanfaat buat anda. Kalau ada hal yang hendak ditanyakan, silahkan bertanya pada kolom komentar dibawah.