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 &lt;/head&gt;&lt;!--<head/>--&gt; 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,&quot;Segoe UI&quot;,&quot;Oxygen-Sans&quot;,&quot;Ubuntu&quot;,&quot;Cantarell&quot;,&quot;Helvetica Neue&quot;,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:&quot;&quot;; 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:&quot;&quot;; 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:&quot;&quot;; 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:&quot;&quot;; 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 != &quot;error_page&quot;'>

Langkah 4
Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; 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!
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Komentar telah ditutup dan disembunyikan. Jika ada yang perlu disampaikan silahkan kirim pesan lewat laman kontak.