Error 404 adalah halaman untuk memberitahukan “Page Not Found” pada blogger. Misalnya, jika pengunjung melakukan klik pada broken link,atau
visitor memasukkan url yang salah pada blog kita. Terkadang halaman Error 404 dianggap sepele, namun halaman ini ternyata bisa mempunyai nilai lebih agar visitor tidak tersesat pada saat membuka blog kita.
Jadi bagaimana membuat halaman 404 Pada blog ?
Pertama Pergi ke setelan > Tema > Edit Html
Dan letakan kode ini tepat di atas <head>
<b:if cond='data:view.isError'>
<style type='text/css'>
/* Error 404 */
body{background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;line-height:1.4em}
#error-page {background:#fff;margin:auto;text-align:center;padding:0 10px;width:100%;max-width:1100px;-webkit-box-sizing:border-box;box-sizing:border-box;}
#error-inner {margin:9% auto 35px;padding:0;list-style:none !important}
#error-inner .box-404 {position:relative;font-weight:bold;width:200px;height:200px;background:linear-gradient(45deg, #ae033f, #f78938);color:#fff;font-size:80px;line-height:190px;margin:0 auto 25px;}
#error-inner .box-404::after {content:""; width:0; height:0; position:absolute; top:0; right:0; border-width:30px; border-style:solid; border-color:#fff #fff transparent transparent; display:block;}
#error-inner .box-404::before {content:""; width:0; height:0; position:absolute; top:0; left:0; border-width:30px; border-style:solid; border-color:#fff transparent transparent #fff; display:block;}
#error-inner .box-404 div::after {content:""; width:0; height:0; position:absolute; bottom:0; left:0; border-width:30px; border-style:solid; border-color:transparent transparent #fff #fff; display:block;}
#error-inner .box-404 div::before {content:""; width:0; height:0; position:absolute; bottom:0; right:0; border-width:30px; border-style:solid; border-color:transparent #fff #fff transparent; display:block;}
#error-inner h3 {text-transform:uppercase;color:#ed5858;font-size:50px;margin:0 auto 20px;font-weight:700;letter-spacing:10px}
#error-inner h2 {color:#2d2d2d;font-weight:700;line-height:1.4em;font-size:30px;}
#error-inner p {line-height:1.4em;font-size:18px;color:#2d2d2d;padding:0}
#search-404{max-width:75%;display:block;margin:0 auto 15%;position:relative;}
#search-404 .icons{width:26px;height:26px;fill:#aaa;vertical-align:middle}
#search-404 .icon-Forward{width:20px;height:20px;}
#search-404 p{font-size:90%;color:#999;padding:20px 20px 0;text-align:right}
#search404 input[type=search]{width:100%;border-radius:50px;height:48px;-webkit-box-shadow:0 15px 32px rgba(0,0,0,.1);box-shadow:0 15px 32px rgba(0,0,0,.1);border:1px solid #e5e5e5;padding:0 48px 0 20px;line-height:48px;font-size:16px;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;background-color:#f9f9f9}
#search404 .src-btn404{background:transparent;border:none;padding:0 16px;outline:none;height:48px;line-height:48px;font-weight:700;margin:0 auto;cursor:pointer;position:absolute;right:0;top:0;z-index:999}
@media screen and (max-width:600px){#error-inner {margin:5% auto 35px;}#search-404{max-width:100%; }}
</style>
</b:if>
Jika sudah save tema
Selanjutnya silakan paste kode ini tepat di atas <body>
<b:if cond='data:blog.pageType != "error_page"'>
Tahap selanjutnya masukan kode ini tepat duntuk atas</body> kode ini biasanya berada di bawa tema sobat
</b:if><b:if cond='data:view.isError'>
<div class='error-wrapper' id='error-wrapper'>
<div id='error-page'>
<div id='error-inner'>
<h3>Error</h3>
<div class='box-404'><div>404</div></div>
<h2>Page Not Found :(</h2>
<p>It looks like you are lost! Try searching here:<br/></p>
</div>
<div id='search-404'>
<form action='/search' id='search404'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input class='src-form404' name='q' placeholder='Search here...' required='required' type='search'/>
<button class='src-btn404' title='Search' type='submit'><svg class="icons icon-Search" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg></button>
</form>
<p>Or, back to <a expr:href='data:blog.homepageUrl'>homepage <svg class="icons icon-Forward" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" /></svg></a></p>
</div>
</div>
</div>
</b:if>
Selanjutnya > simpan tema
Bagaimana mudah bukan