Make Error Page 404 100% For Blogger

Dulu sangkin kepengen punya halaman error (Page Not Found) sendiri atau yang sering dikenal dengan Error 404 (Not Found)! pada blogspot, Koben buat tutorial seperti berikut Customize 404 Page for Blogspot Jangan diketawain yah :"> :D Apakah yang dimaksud dengan pesan galat 404! Secara singkat & global dapat diartikan sbb: Seorang client mencari sesuatu pada suatu web/blog/search engine, namun server pada search engine/blog/web yang dituju tidak menyediakan konten yang dicari :-/ Begitulah kira-kira ;))
Dengan sistim pencarian yang dimiliki pada blogspot, dimana fitur ini terpasang di search box (kotak pencarian) hasil page not found/404 pages kurang begitu full stylish kelihatannya :D

Coba tengok masa macam begini kita punya ERROR PAGES!!!

No posts matching the query: wtf. Show all posts

No posts matching the query: wtf. Show all posts

Enggak banget deh :)) Bagaimana trick membuat customize 404 page buat blogger berbasis blogspot agar tampak gaya? Tidak boleh kalah gaya kita blogger sama wordpress :))
Penjelasan singkat. Kode pembentuk No posts matching the query: yaitu

<b:includable id='status-message'>
<b:if cond='data:navMessage'>

<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
  <div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>

<div style='clear: both;'/>
</b:if>
</b:includable>

Perhatikan kode-kode tersebut, Beben sudah bedakan dengan warna. Sobat bisa lihat dengan seksama tagging mana yang mengkover-kover! Kalau dijelaskan secara terperinci bisa panjang episodenya :P

Sekarang kalian buat kodenya jadi macam begini, silahkan perhatikan mana saja yang dihapus ;) (belajar dikit²) ;))<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-body'>
<data:navMessage/>
</div>


<div style='clear: both;'/>
</b:if>
</b:includable>Bila sudah dihapus kode yang Koben maksudkan, sisipkan/gantikan dengan code berikut

<style>
body { background: transparent !important }
html {
background: #FFF url(http://LINK-YOUR-IMAGE.jpg) no-repeat center 50%;
height: 100%;
}
.post,#content-wrapper,#header-wrapper,#footer {
display:none !important
}
</style>

Menjadi begini bentuknya

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<style>
body{background: transparent !important}html{background: #FFF url(http://LINK-YOUR-IMAGE.jpg) no-repeat center 50%;height: 100%;}
.post,#content-wrapper,#header-wrapper,#footer{display:none !important}
</style>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Link gambar sobat bisa buat dengan kreasi masing². Variable CSS bisa sobat mainkan/tambahkan juga bila kurang sreuk. Konsentrasi pada code CSS yg diberi warna biru tua.

Kode² tersebut pasti akan berlainan adanya. Isi variable CSS display:none mengartikan tidak akan ditampilkan. Pada template demo embah google, saya mempunyai UNIQUE-ID.post,#content-wrapper,#header-wrapper,#footerCarilah unik-id pada template kalian masing² yg memang akan tidak ditampilkan!
PERSIAPAN:
Backup Download Full Your Template.
Expand Widget Templates
Segelas minuman & sedikit cemilan :D
demo 404 error page bloggerBegitu trik dan hack membuat error page 404 bagi blog platform blogspot. Bagi yang domain sendiri tidak usah pake cara ini ;)) Semoga bermanfaat.
attention

do not use this hack, clashed with the labels / categories
SORRY!!!

UPDATED
penjelasan 404 error page & pemakaian 404 error page :)
Happy blogging \m/