Membuat dan memodifikasi halaman error 404 cukup penting dilakukan semoga makin informative dibandingkan dibiarkan tampil seadanya. Apalagi jikalau tampilan halaman error 404 itu dibentuk responsive, pun ditambahin fitur search form.
Pasti akan lebih menarik pengunjung, dan hampir dapat dipastikan akan menunda beliau untuk segera kabur dari blog kita.
Kebiasaan pengunjung (yang benar-benar mencari sesuatu yang beliau butuhkan) itu suka cepat-cepat close tab, jikalau apa yang diinginkannya hanya berakhir di halaman error atau broken link.
Itulah salah satu faktor penyebab bounce rate blog/website kita dapat sangat tinggi.
Berikut, tutorial cara pasang halaman error 404 di Blogger responsive + search form.
Langkah 1
Login ke Blogger kemudian masuk ke Tema > Edit HTML.
Langkah 2
Cari arahan
Langkah 3
Cari arahan
Langkah 4
Cari arahan
Langkah 5
Simpan tema
Hasilnya hanya akan terlihat jikalau Anda cukup berani untuk mengedit salah satu link artikel blog Anda menjadi error.
Selanjutnya: Position: sticky not working? Begini Triknya Agar Berhasil!
Pasti akan lebih menarik pengunjung, dan hampir dapat dipastikan akan menunda beliau untuk segera kabur dari blog kita.
Kebiasaan pengunjung (yang benar-benar mencari sesuatu yang beliau butuhkan) itu suka cepat-cepat close tab, jikalau apa yang diinginkannya hanya berakhir di halaman error atau broken link.
Itulah salah satu faktor penyebab bounce rate blog/website kita dapat sangat tinggi.
Berikut, tutorial cara pasang halaman error 404 di Blogger responsive + search form.
Langkah 1
Login ke Blogger kemudian masuk ke Tema > Edit HTML.
Langkah 2
Cari arahan
</head> atau </head><!--<head/>--> kemudian letakkan arahan 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 arahan
<body> kemudian letakkan arahan in di bawahnya:<b:if cond='data:blog.pageType != "error_page"'>
Langkah 4
Cari arahan
</body> atau <!--</body>--></body> kemudian letakkan arahan berikut di atas arahan 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 jikalau Anda cukup berani untuk mengedit salah satu link artikel blog Anda menjadi error.
Selanjutnya: Position: sticky not working? Begini Triknya Agar Berhasil!
Advertisement