Inilah Menambahkan Custom Error 404 Di Blogger

Diposkan oleh fezarzone May 17, 2018 Post a Comment

Menambahkan Custom Error 404 di Blogger - Hal ini akan kurang baik jikalau pengguna yang mengunjungi blog Anda dan mendapat kesalahan 404 atau halaman tidak ditemukan. Hal ini sanggup terjadi alasannya yaitu banyak sekali macam alasan menyerupai URL yang salah ketik, duduk masalah indeks atau halaman yang dicari sudah dihapus pengelola blog. Dalam artikel ini Saya akan menawarkan cara untuk menambahkan halaman khusus error 404 di blog Anda.

Hal ini akan kurang baik jikalau pengguna yang mengunjungi blog Anda dan mendapat kesalah Inilah Menambahkan Custom Error 404 di Blogger

Apa itu Error 404?

Error 404 yaitu sebuah halaman yang tidak ditemukan di suatu web dan server.

Berikut cara menambahkan custom error 404 di blogger :

1. Buka Blogger Anda > Klik Template > Edit html > Tambahkan isyarat di bawah ini di atas isyarat </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>

2. Selanjutnya tambahkan isyarat di bawah ini sempurna di bawah isyarat <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>

CSS HTML Tips Blogger