Cara Membuat Halaman Error 404 Page Not Found Di Template JetTheme

Eror 404 page not found adalah sebuah pesan yang disampaikan kepada pembaca/pengunjung ataupun robot perayap yang mengunjungi sebuah link pada suatu website, dimana link yang dituju itu tidak dapat menemukan sesuatu. Hal ini bisa saja terjadi karena kesalahan dalam membagikan link yang tidak valid ataupun konten pada link tersebut sudah dihapus atau dipindahkan.

Kali ini Admin akan membagikan sebuah tips untuk membuat halaman error 404 page not found sederhana khususnya untuk pengguna template JetTheme. Apakah Sobat SD ingin menggunakan halaman error 404 default atau ingin memodifikasi agar lebih stylish dan keren, kembali ke minat masing-masing.

Gambar diatas adalah tampilan default error 404 pada template JetTheme yang masih menggunakan default blogger. Apakah Creator template JetTheme masih menggunakan halaman error 404 default blogger atau sudah memiliki halaman tersendiri, admin masih kurang jelas dan bila ada Sobat SD yang lebih tahu boleh komentar ke Admin Sobat SD.

Namun tidak ada salahnya kita mencoba berkreasi sendiri untuk membuat halaman error 404 page not found sendiri agar blog menjadi lebih keren, dengan cara sebagai berikut:

1. Tambahkan script dibawah ini di bagian atas/sebelum </head>.

<b:if cond='data:view.isError'><style>
  #main, #header, #sidebar, #footer,, .sobatsdToTop {display:none}
  body,html {overflow:hidden; margin:0; padding:0; width:100%; min-height:100vh}
  body {background:var(--jt-bg-light); color:#1d2129}
  #sobatsd404 {background:var(--jt-bg-light); text-align:center; margin:auto; font-weight:700; font-size:45px; position:fixed; width:100%; height:100%; line-height:1.25em; z-index:9999;}
  #sobatsd404 #error-text {position:relative; font-size:40px; color:#FF8C00; top:50%; right:50%; transform:translate(50%,-50%);}
  #sobatsd404 #error-text a {color:#888; text-decoration:none}
  #sobatsd404 #error-text p {margin:0!important; letter-spacing:.5px;}
  #sobatsd404 #error-text span {color:#008c5f;font-size:100px;}
  #sobatsd404 #error-text a.back {background:#008c5f;color:#00008B;padding:10px 20px;font-size:20px;border-radius:50px;border:double #fff;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all 0.5s ease-out;}
  #sobatsd404 #error-text a.back:hover {background:#444;color:#fff;border:double #eceeee;}
  #sobatsd404 #error-text a.back:active {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);background:#333;color:#fff;border:double #eceeee;}
  #sobatsd404 #error-text #copyright {font-size:16px}
  #sobatsd404 #error-text #copyright a {color:#008c5f}

  @media only screen and (max-width:640px){
    #sobatsd404 #error-text {font-size:20px;}
    #sobatsd404 #error-text span {font-size:60px;}
    #sobatsd404 #error-text a.back {padding:5px 10px;font-size:15px;}
    #sobatsd404 #error-text a.back:hover, #sobatsd404 #error-text a.back:active {border:0;}
  }
</style></b:if>

Untuk pengguna template lain yang belum menyediakan halaman error 404 dari developer atau masih menggunakan bawaan blogger dapat mengganti kode yang diberi highligt diatas menyesuaikan dengan template yang dimiliki. Biasanya menggunakan kode  #header, #outer-wrapper, #post-wrapper, #sidebar-wrapper, #content-wrapper, #footer-wrapper, #wrapper.

2. Tambahkan script dibawah ini di bagian atas/sebelum </body>.

<b:if cond='data:view.isError'>
  <div id='sobatsd404'>
    <div id='error-text'>
      <span>404</span>
      <p>HALAMAN TIDAK DITEMUKAN!</p>
      <p><a class='back' expr:title='data:blog.title' href='/'>Kembali Ke Halaman Awal</a></p>
      <div id='copyright'>
        <a expr:title='data:blog.title' href='/'><data:blog.title/></a> &#169;<script>document.write(new Date().getFullYear())</script>. All Rights Reserved
        </div>
    </div>
  </div>
</b:if>

 

Untuk demo, Sobat SD coba klik tautan berikut "contoh error 404". Semoga bermanfaat, Wassalam.

Location:

Share :