![Gambar](http://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY/s113/bungfrangki.jpg)
Oleh
Bungfrangki
·
![Cara Membuat Halaman Error 404 + Kolom Search](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbI4kqnS2Pir-_0GtiD7U8LLqYN_VSVPmr1Fo62hVtjuRpcSI1swAJxT6Yh-e36cwmFCiidzLOTQfJyxwWW_HmljWW9i5ziWmt5L0Zpu9fCHJCN_lI2YhKneZnXCI1q8vl-f8V5nqvbKjq/s1600/cara-memasang-halaman-error-404-di-blogger.png)
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 Cara Membuat Halaman Error 404 di Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbI4kqnS2Pir-_0GtiD7U8LLqYN_VSVPmr1Fo62hVtjuRpcSI1swAJxT6Yh-e36cwmFCiidzLOTQfJyxwWW_HmljWW9i5ziWmt5L0Zpu9fCHJCN_lI2YhKneZnXCI1q8vl-f8V5nqvbKjq/s1600/cara-memasang-halaman-error-404-di-blogger.png)
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
Langkah 3
Cari kode
Langkah 4
Cari kode
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!
![Cara Membuat Halaman Error 404 di Blogger Cara Membuat Halaman Error 404 di Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbI4kqnS2Pir-_0GtiD7U8LLqYN_VSVPmr1Fo62hVtjuRpcSI1swAJxT6Yh-e36cwmFCiidzLOTQfJyxwWW_HmljWW9i5ziWmt5L0Zpu9fCHJCN_lI2YhKneZnXCI1q8vl-f8V5nqvbKjq/s1600/cara-memasang-halaman-error-404-di-blogger.png)
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><!--<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>--></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!
Baca Juga:
Share this
Posting Komentar
Komentar telah ditutup. Jika ada yang perlu disampaikan terkait konten ini, silahkan kirim pesan lewat laman kontak.