Cara Menambahkan Custom Halaman Error 404 Pada Blog

Cara Menambahkan Custom Halaman Error 404 Pada Blog - Menambahkan halaman error 404 pada blogger itu perlu ya sob, tapi jangan sampai ada sedikit pun halaman error pada blog sobat pasti akan menimbulkan efek yang kurang bagus pada search engine Google tentunya.

Error 404 adalah halaman yang biasanya tampil jikalau link yang dibuka error maupun juga bisa salah ketik, saya ingat kan lagi coba sobat cek terlebih dahulu pada blog sobat ada ngggak yang broken link ( Link Rusak ).

Baca Juga : Cara Mengecek dan Mengatasi Broken Link pada Blog

Cara Menambahkan Custom Halaman Error 404 Pada Blog

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode dibawah ini dan pastekan 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>

Kemudian tambahkan kode dibawah ini tepat diatas 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>

Jika sudah klik simpan pada template sobat.

Oke sekian yang bisa saya sampaikan tentang Cara Menambahkan Custom Halaman Error 404 Pada Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.