Cara Membuat Custom Halaman Error 404 Pada Blog
March 2, 2019
Halaman error 404 merupakan sebuah halaman yang muncul ketika pengujung salah mengakses link yang rusak atau menulis sesuatu di menu pencarian pada blog ataupun website sehingga secara otomatis akan di arahkan ke halaman error 404, yang berisi halaman tidak ditemukan (Not Found).
Hal ini dapat menimbulkan efek buruk pada sistem search engine Google, oleh karena itu teman - teman dituntut untuk menambahkan halaman error 404 pada website ataupun blog. Sesuai dengan judul di atas pada kesempatan ini saya akan membagikan bagaimana cara membuatnya.
Cara Membuat Custom Halaman Error 404 Pada Blog
1. Login ke akun blogger
2. Selanjutnya pilih Tema > Edit HTML
3. Copy kode dibawah ini dan pastekan tepat diatas kode </head>
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
/* CSS Error 404 www.carayunik.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>
4. Lalu tambahkan kode dibawah ini tepat diatas 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>
5. Klik simpan dan lihat hasilnya.
Catatan: Halaman Error 404 akan muncul saat ada link yang rusak (broken link) atau salah ketik pada menu pencarian.
Demikian yang bisa saya sampaikan tentang Cara Membuat Custom Halaman Error 404 Pada Blog. Apabila teman-teman kurang paham tentang artikel yang saya bagikan, silahkan berkomentar atau hubungi saya melalui form yang sudah saya sediakan. Sekian dari saya, Terima Kasih :(
