Cara Membuat Halaman Error 404 + Kolom Search

bungfrangki Tutorial Blog Cara Membuat Halaman Error 404 + Kolom Search

Membuat dan memodifikasi halaman error 404 cukup penting dilakukan agar makin informative dibandingkan dibiarkan tampil seadanya. Apalagi jika tampilan halaman error 404 itu dibuat responsive, pun ditambahin fitur search form.

Cara Membuat Halaman Error 404 di Blogger

Pasti akan lebih menarik pengunjung, dan hampir bisa dipastikan akan menunda dia untuk segera kabur dari blog kita.

Kebiasaan pengunjung (yang benar-benar mencari sesuatu yang dia butuhkan) itu suka cepat-cepat close tab, jika apa yang diinginkannya hanya berakhir di halaman error atau broken link.

Itulah salah satu faktor penyebab bounce rate blog/website kita bisa sangat tinggi.

Berikut, tutorial cara pasang halaman error 404 di Blogger responsive + search form.

Langkah 1
Login ke Blogger lalu masuk ke Tema > Edit HTML.

Langkah 2
Cari kode </head> atau </head> lalu letakkan kode berikut diatasnya:

<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>

Langkah 3
Cari kode <body> kemudian letakkan kode in di bawahnya:

<b:if cond='data:blog.pageType != "error_page"'>

Langkah 4
Cari kode </body> atau </body> lalu letakkan kode berikut di atas kode tadi:

</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>

Langkah 5
Simpan tema

Hasilnya hanya akan terlihat jika Anda cukup berani untuk mengedit salah satu link artikel blog Anda menjadi error.

Selanjutnya: Position: sticky not working? Begini Triknya Agar Berhasil!

Label

Tutorial Blog