Menciptakan Halaman Error 404 dengan Benar

Error Page

Seperti yang pernah Saya tuliskan bahwa tag kondisional bisa menahan pemanggilan elemen (baca di sini), maka jika Anda hanya memanfaatkan tag kondisional error_page untuk menampilkan tabir, itu hanya akan membuang-buang waktu saja terutama jika dilihat dari segi komunikasi, tentang bagaimana cara kita memberitahukan bahwa halaman yang sedang mereka akses itu tidak ada. Kabar buruk jika Anda memiliki halaman blog yang lambat diakses. Jika itu terjadi, maka pesan kesalahan yang ingin Anda sampaikan tidak akan pernah tersampaikan dengan benar.

Pernyataan Saya di atas tidak akan berlaku lagi jika Anda bisa membuat akses halaman kesalahan menjadi lebih cepat. Dan cara terbaik untuk melakukan itu adalah dengan menerapkan logika pengingkaran pada tag kondisional halaman kesalahan/error page. Berikut ini adalah cara paling sederhana untuk melakukan itu:

<body>
    <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
        ...
        ...
        Daerah ini berisi bagian-bagian utama dalam sebuah blog seperti posting, widget, sidebar dan yang lainnya.
        Daerah ini akan diabaikan karena kita berada di dalam kondisi pengingkaran.
        ...
        ...
    </b:if>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <div id='error-page'>
           <h1>Tuliskan sesuatu di sini. Bagian ini hanya akan tampil saat halaman tidak ditemukan.</h1>
        </div>
    </b:if>
</body>

Sisanya, mungkin Anda ingin menambahkan beberapa kode CSS:

#error-page {
  text-align:center;
  background-color:#900;
  position:fixed !important;
  position:absolute; /* IE6 Fallback */
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  padding-top:100px;
  z-index:99999;
}

Lihat Demo

34 Komentar

  • Putra

    rubah titlenya gmn mas?? :D
    title di barnya itu loo.. :)

  • Taufik Nurrohman

    @Alam Perwira Tag <title> yang sudah dimodifikasi memang akan menghasilkan tampilan yang salah saat berada di halaman kesalahan **p
    Untuk memperbaikinya, ubah kode yang tadinya seperti ini:

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <title><data:blog.pageName/> ~ <data:blog.title/></title>
    </b:if>

    menjadi seperti ini:

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <title>Laman Tidak Ditemukan ~ <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/> ~ <data:blog.title/></title>
    </b:if>
    </b:if>
    • Unknown

      Maaf nyrimbung...
      kalo codenya ky gini

      <b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> - <data:blog.title/></title><b:else/><title>Bagusa4 Blogger</title></b:if><b:if cond='data:blog.pageType == &quot;archive&quot;'><title><data:blog.pageName/> - <data:blog.title/></title></b:if><b:if cond='data:blog.pageType == &quot;label&quot;'><title><data:blog.pageName/> | <data:blog.title/></title></b:if><b:if cond='data:blog.pageType != &quot;item&quot;'>
      

      naruhnya di mana yah??
      :D

  • Unknown

    mantap bang, sudah baca di status abang tadi pagi , kalau di taruh di dalam setelan nggak bekerja ya tagnya

  • Taufik Nurrohman

    @Mbah Qopet Saya kurang tahu soal itu, meskipun katanya Blogger mengizinkan kita untuk menyisipkan kode HTML, tapi Saya rasa cara terbaik tetap saja cara manual :-bd

  • Unknown

    KayakX gak bisa, kalau di Setelan, Coba aja di Gadget Bisa gak, kalau bisa berarti di setelan bisa :D

  • Unknown

    Wow mantap :D

  • Beben Koben

    ini 404 saya...
    http://undercover-blogger.blogspot.com/404.html
    http://ben-tools.blogspot.com/404.html
    http://embah-google.blogspot.com/404.html
    hihihi :D

  • Taufik Nurrohman

    @Beben Koben Busettt.. diredirect semua! :)

  • Unknown

    mohon maaf pasang kodenya dimana yah

  • Taufik Nurrohman

    @Slamet Rivai Pelajari tentang dasar tag kondisional dulu, baru melangkah ke artikel ini: http://hompimpaalaihumgambreng.blogspot.com/2011/08/pemahaman-tag-kondisional-tingkat.html ^_^

    • you

      setuju....

  • Anonim

    ak berhasil mas, jadi keren..he he \o/ blogger makin kereeen

    ni hasilnya www.klikedukasi.com/ganteng.php

    oh ya mas, request dong tutorial parallax make jquery.
    thanks

  • Unknown

    all ane bisa bikin page not error seperti ini all
    http://jakselcommunity.blogspot.com/2012/05/dimas.html

  • Unknown

    page 404 saya \o/
    http://www.sdnaan09.com/404
    :-bd :-bd :-bd

  • Surga Kenari

    Berhasil :) jadikanpinter.blogspot.com/404wew.html

  • Viyan Pradita

    Uwes suwe anggo kang :D
    kode-blogger.blogspot.com/error404

    Betah ki nongkrong moco=moco sing ongel dipahami :p

  • Anonim

    wah keren idenya pakai kondisonal tag, jadi ilang semua isi blognya :-bd
    kira2 bisa nga kang tag kondisional buat <noscript>, sama disable adblock plus ?

  • Ugi Rahmat Ziadi

    Mas, cara supaya yang ditampilkan hanya tulisan sama gambar buat halaman error aja gimana? karna laman error 404 yang sesuai harapan saya hanya bertahan sekitar 4 detik saja setelah itu guestbook, header, sama sreensavernya datang ngerusuh. Bisa dilihat di sini:
    http://eslalerijo.blogspot.com/asd
    terima kasih

    • Taufik Nurrohman

      Cara meletakkannya yang salah. Caranya begini —Letakkan kode ini di bawah <body>:

      <b:if cond='data:blog.pageType != &quot;error_page&quot;'>

      Setelah itu letakkan kode ini di atas </body>:

      <b:else/>
      <div id='error-page'>
      <h1>Halaman Tidak Ditemukan</h1>
      </div>
      </b:if>
  • Forgotten

    klau pake gmbar codenya jdi gimna mas ??

    • Taufik Nurrohman

      <div id='error-page'>
      <img src='url-gambar.jpg' alt='Not Found'/>
      </div>
  • Forgotten

    mas kalau bikin error page dengan di sertai tombol Go back atau link" lainya seperti punya devianArt itu bisa di trapkan di blog?
    contoh : http://www.deviantart.com/404

    • Taufik Nurrohman

      Tambahkan tombol ini di dalam elemen #error-page:

      <button onclick="javascript:history.go(-1);">Kembali</button>
  • Ndistyo

    Matur suwon mas, atas tips nya dan akhirnya aku berhasil ^_^

  • budkalon

    hore!!!!! :D
    Ini halaman 404 saya:

    http://labegg.blogspot.com/404

  • Anonim

    mas mau nanya halaman error saya kan cuma tampil di tempat postingan, kalo biar satu halaman penuh gmn mas, kaya punya dte ini atau kaya punya atas saya ini...

    makasih mas... http://dammar-asihan.blogspot.com/404

    • Taufik Nurrohman

      Kode CSS ini fungsinya untuk membuat elemen <div id='error-page'></div> melebar menjadi satu halaman penuh:

      #error-page {
      text-align:center;
      background-color:#900;
      position:fixed !important;
      position:absolute; /* IE6 Fallback */
      top:0;
      right:0;
      bottom:0;
      left:0;
      padding-top:100px;
      z-index:99999;
      }
  • Unknown

    Kang, bisa ga kalo redirect ke 2 alamat berbeda.?

    Satu di bagian gambar, satu lagi bagian luar gambar..

    • Taufik Nurrohman

      Mungkin tag meta redirect seperti ini???

      <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
      <meta http-equiv="refresh" content="0; url=http://www.nama-situs.com/404.html"/>
      </b:if>
      • Unknown

        itu taruh dimana kang.?
        masa tag meta di redirect, maksude piye toh? aku ra mudeng... @_@

  • Unknown

    Alhamdulillah mas.... akhirnya bisa juga.... terimakasih mas...
    caranya sangat mudah banget.... :-bd

  • Unknown

    mas jika ingin memunculkan main dan widget tersebut di tata letak gimana mas ? ... yang itu kan widgetnya doank di tata letak . main wrapper jadi hilang

Komentar telah ditutup.