Menciptakan Halaman Error 404 dengan Benar
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 != "error_page"'>
...
...
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 == "error_page"'>
<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;
}
34 Comments:
rubah titlenya gmn mas?? :D
title di barnya itu loo.. :)
By
Putra, at Sunday, March 25, 2012 at 6:54:00 AM GMT+7
@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 == "index"'>
<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 == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Laman Tidak Ditemukan ~ <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
</b:if>
By
Taufik Nurrohman, at Sunday, March 25, 2012 at 7:51:00 AM GMT+7
mantap bang, sudah baca di status abang tadi pagi , kalau di taruh di dalam setelan nggak bekerja ya tagnya
By
Aeferes / Al Firous, at Sunday, March 25, 2012 at 10:18:00 AM GMT+7
@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
By
Taufik Nurrohman, at Sunday, March 25, 2012 at 10:57:00 AM GMT+7
KayakX gak bisa, kalau di Setelan, Coba aja di Gadget Bisa gak, kalau bisa berarti di setelan bisa :D
By
Sinto, at Sunday, March 25, 2012 at 3:19:00 PM GMT+7
Wow mantap :D
By
Unknown, at Monday, March 26, 2012 at 6:24:00 PM GMT+7
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
By
Beben Koben, at Tuesday, March 27, 2012 at 4:57:00 AM GMT+7
@Beben Koben Busettt.. diredirect semua! :)
By
Taufik Nurrohman, at Tuesday, March 27, 2012 at 8:19:00 AM GMT+7
mohon maaf pasang kodenya dimana yah
By
Unknown, at Wednesday, March 28, 2012 at 2:46:00 PM GMT+7
@Slamet Rivai Pelajari tentang dasar tag kondisional dulu, baru melangkah ke artikel ini: http://hompimpaalaihumgambreng.blogspot.com/2011/08/pemahaman-tag-kondisional-tingkat.html ^_^
By
Taufik Nurrohman, at Wednesday, March 28, 2012 at 6:42:00 PM GMT+7
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
By
Anonymous, at Sunday, April 29, 2012 at 12:19:00 AM GMT+7
all ane bisa bikin page not error seperti ini all
http://jakselcommunity.blogspot.com/2012/05/dimas.html
By
Unknown, at Friday, May 25, 2012 at 6:26:00 PM GMT+7
page 404 saya \o/
http://www.sdnaan09.com/404
:-bd :-bd :-bd
By
Unknown, at Thursday, June 7, 2012 at 11:29:00 AM GMT+7
Berhasil :) jadikanpinter.blogspot.com/404wew.html
By
Surga Kenari, at Friday, August 3, 2012 at 2:17:00 AM GMT+7
Uwes suwe anggo kang :D
kode-blogger.blogspot.com/error404
Betah ki nongkrong moco=moco sing ongel dipahami :p
By
Viyan Pradita, at Tuesday, November 27, 2012 at 4:44:00 PM GMT+7
wah keren idenya pakai kondisonal tag, jadi ilang semua isi blognya :-bd
kira2 bisa nga kang tag kondisional buat <noscript>, sama disable adblock plus ?
By
Anonymous, at Tuesday, January 15, 2013 at 5:05:00 AM GMT+7
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
By
Ugi Rahmat Ziadi, at Wednesday, February 13, 2013 at 11:36:00 PM GMT+7
Cara meletakkannya yang salah. Caranya begini —Letakkan kode ini di bawah <body>:
<b:if cond='data:blog.pageType != "error_page"'>
Setelah itu letakkan kode ini di atas </body>:
<b:else/>
<div id='error-page'>
<h1>Halaman Tidak Ditemukan</h1>
</div>
</b:if>
By
Taufik Nurrohman, at Thursday, February 14, 2013 at 12:15:00 AM GMT+7
klau pake gmbar codenya jdi gimna mas ??
By
Forgotten, at Thursday, February 14, 2013 at 6:42:00 AM GMT+7
<div id='error-page'>
<img src='url-gambar.jpg' alt='Not Found'/>
</div>
By
Taufik Nurrohman, at Thursday, February 14, 2013 at 7:37:00 AM GMT+7
Oke, makasih mas udah bisa
By
Ugi Rahmat Ziadi, at Thursday, February 14, 2013 at 8:45:00 PM GMT+7
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
By
Forgotten, at Friday, February 15, 2013 at 2:56:00 AM GMT+7
Tambahkan tombol ini di dalam elemen #error-page:
<button onclick="javascript:history.go(-1);">Kembali</button>
By
Taufik Nurrohman, at Saturday, February 16, 2013 at 7:26:00 AM GMT+7
Matur suwon mas, atas tips nya dan akhirnya aku berhasil ^_^
By
Ndistyo, at Saturday, March 16, 2013 at 12:41:00 AM GMT+7
hore!!!!! :D
Ini halaman 404 saya:
http://labegg.blogspot.com/404
By
budkalon, at Thursday, March 28, 2013 at 12:52:00 PM GMT+7
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
By
Anonymous, at Monday, April 15, 2013 at 6:54:00 PM GMT+7
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;
}
By
Taufik Nurrohman, at Wednesday, April 17, 2013 at 6:03:00 PM GMT+7
Kang, bisa ga kalo redirect ke 2 alamat berbeda.?
Satu di bagian gambar, satu lagi bagian luar gambar..
By
Unknown, at Thursday, June 27, 2013 at 12:27:00 AM GMT+7
Mungkin tag meta redirect seperti ini???
<b:if cond='data:blog.pageType == "error_page"'>
<meta http-equiv="refresh" content="0; url=http://www.nama-situs.com/404.html"/>
</b:if>
By
Taufik Nurrohman, at Sunday, June 30, 2013 at 9:17:00 AM GMT+7
itu taruh dimana kang.?
masa tag meta di redirect, maksude piye toh? aku ra mudeng... @_@
By
Unknown, at Monday, July 1, 2013 at 1:44:00 AM GMT+7
setuju....
By
you, at Saturday, December 7, 2013 at 5:18:00 PM GMT+7
Maaf nyrimbung...
kalo codenya ky gini
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title><b:else/><title>Bagusa4 Blogger</title></b:if><b:if cond='data:blog.pageType == "archive"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if><b:if cond='data:blog.pageType == "label"'><title><data:blog.pageName/> | <data:blog.title/></title></b:if><b:if cond='data:blog.pageType != "item"'>
naruhnya di mana yah??
:D
By
bagusa4, at Wednesday, December 18, 2013 at 2:13:00 PM GMT+7
Alhamdulillah mas.... akhirnya bisa juga.... terimakasih mas...
caranya sangat mudah banget.... :-bd
By
Unknown, at Wednesday, September 17, 2014 at 10:23:00 AM GMT+7
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
By
Unknown, at Monday, November 30, 2015 at 8:11:00 PM GMT+7
Post a Comment
<< Home