Membuat Halaman Error 404 Page Not Found di Blogger Menjadi Keren

Membuat Custom Halaman Error 404 di Blogger

Kode error 404 adalah untuk page not found atau halaman tidak ditemukan. Bisa jadi karena halaman tersebut sudah dihapus atau salah memasukkan URL. Secara default Blogger sudah mendukung custom error page 404 halaman tidak ditemukan dengan adanya tag konsidional yang tersedia. Maka igniel.com akan memanfaatkan fitur tersebut untuk membuat tampilannya menjadi lebih keren.


Membuat Halaman Custom 404 Page Not Found di Blogspot

Harap diingat ya, halaman ini hanya muncul jika kamu salah memasukkan URL atau karena artikelnya sudah dihapus. Tambahkan kode ini "SEBELUM / DI ATAS" </head>.
<b:if cond='data:view.isError'><style>
  @import url('https://fonts.googleapis.com/css?family=Ruda:400,700');
  #header, #outer-wrapper, #post-wrapper, #sidebar-wrapper, #content-wrapper, #footer-wrapper, #wrapper, .ignielToTop {display:none}
  body,html {overflow:hidden; margin:0; padding:0; width:100%; min-height:100vh}
  body {background:#fff; color:#1d2129}
  #igniel404 {background:#eceeee; text-align:center; margin:auto; font-weight:700; font-size:45px; font-family:'Ruda',sans-serif; position:fixed; width:100%; height:100%; line-height:1.25em; z-index:9999;}
  #igniel404 #error-text {position:relative; font-size:40px; color:#666; top:50%; right:50%; transform:translate(50%,-50%);}
  #igniel404 #error-text a {color:#888; text-decoration:none}
  #igniel404 #error-text p {margin:0!important; letter-spacing:.5px;}
  #igniel404 #error-text span {color:#008c5f;font-size:100px;}
  #igniel404 #error-text a.back {background:#008c5f;color:#fff;padding:10px 20px;font-size:20px;border:double #fff;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all 0.5s ease-out;}
  #igniel404 #error-text a.back:hover {background:#444;color:#fff;border:double #eceeee;}
  #igniel404 #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;}
  #igniel404 #error-text #copyright {font-size:16px}
  #igniel404 #error-text #copyright a {color:#008c5f}

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

Lalu tambahkan kode HTML ini "SEBELUM / DI ATAS" tag penutup </body>.
<b:if cond='data:view.isError'>
  <div id='igniel404'>
    <div id='error-text'>
      <span>404</span>
      <p>HALAMAN TIDAK DITEMUKAN!</p>
      <p><a class='back' href='/' expr:title='data:blog.title'>Kembali Ke Halaman Awal</a></p>
      <div id='copyright'>
        <a href='/' expr:title='data:blog.title'><data:blog.title/></a> © 2016 - <script>document.write(new Date().getFullYear())</script>. All Rights Reserved
        </div>
    </div>
  </div>
</b:if>

Untuk live demo coba buka URL https://www.igniel.com/p/tidakada.html. Itu adalah URL yang salah karena tidak ada postingan apa-apa disana. Maka page error 404 halaman tidak ditemukan di Blogger akan muncul. Atau cek di Codepen saya.


Sengaja tidak ditambahkan script redirect ke homepage agar lebih ringan. Toh disana ada tombol kembali ke halaman awal, bukan.

Cara Mengganti Judul Halaman Error 404 di Blogger

Bisa juga mengganti judul blog ketika membuka halaman error. Caranya cukup tambahkan kode berikut "SETELAH / DI BAWAH" <head>.
<b:if cond='data:view.isError'>
  <title>Halaman Tidak Ditemukan - <data:blog.title/></title>
</b:if>

Tinggal ganti tulisannya dengan keinginan kamu. Semoga bermanfaat dan beguna untuk memperbagus tampilan Blogspot.

Artikel Terkait

8 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Candrarohman
    29 Oktober, 2022
    Profil: https://www.blogger.com/profile/09886452788688705534
    Gak berhasil Mba...
  • Harry Naga
    06 Juli, 2022
    Profil: https://www.blogger.com/profile/08476568569406367644
    • Harry Naga
      06 Juli, 2022
      Profil: https://www.blogger.com/profile/08476568569406367644
      gimana cara membuat kek gini mbak

  • Sultan Note
    28 September, 2020
    Profil: https://www.blogger.com/profile/18079926358561058414
    Gg work mba e? -_-
  • Mirza Saputra
    23 September, 2020
    Profil: https://www.blogger.com/profile/14837247590428101570
    gas bisa min
  • Lafaek Nurak
    11 Mei, 2020
    Profil: https://www.blogger.com/profile/07304510022622546476
    thanks... visit mine here https://www.lafaeknurak.blogspot.com/
  • Kanal Lirik
    17 Desember, 2019
    Profil: https://www.blogger.com/profile/11759718745299492373
    mbak, mau pasang di textrim v2 juga gk bisa
  • Unknown
    11 Oktober, 2018
    Profil: https://www.blogger.com/profile/16269051990337641941
    Ijin pake mba... :)