Cara Menambahkan Custom Error 404 di Blogger
Pada kali ini saya akan mengajarkan kepada anda bagaimana Cara Menambahkan Custom Error 404 di Blogger yang berfungsi sebagai halaman penanda bahwa halaman yang sedang 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 karena beberapa faktor, misalnya ketika pengunjung melakukan kesalahan pengetikan alamat url, atau pengunjung mencoba mengunjungi halaman yang tidak terdaftar pada situs blog anda, bisa juga karena alamat url yang sedang dikunjungi pengunjung ternyata sudah dihapus.
Dengan membuat custom error 404 pada blog, pengunjung bisa tahu bahwa alamat url yang sedang 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 == "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>Langkah 2 - Selanjutnya, silahkan salin kode dibawah ini dan letakan dibawah 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>Pada tahap ini anda sudah berhasil membuat custom error 404 di blogger. Untuk melakukan 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 Panduan Blog, semoga bermanfaat untuk anda. Apabila ada hal yang ingin ditanyakan, silahkan bertanya pada kolom komentar dibawah.
