Mecha versi 2.6.4 sudah dirilis!

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

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

Unknown

mohon maaf pasang kodenya dimana yah

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.