Membuat Halaman Error Ala Mad Trik

Kamu sering menghapus artikel yang ada di blog kamu, atau sering salah menulis alamat blog kamu, atau mungkin sering menuju artikel yang sudah dihapus?. Tampilan halaman yang error pasti biasa-biasa aja kan, nah kali ini saya akan membagikan bagaimana caranya untuk memperganteng-ganteng serigala *Loh*, maksudnya memperganteng tampilan halaman errornya. Kalo mau lihat contohnya silahkan lihat hasilnya di tautan berikut "Contoh Halaman Error Mad Trik" (Halaman error blog ini sudah berganti tampilan, jadi jika ingin melihat hasilnya bisa dilihat pada gambar dibawah ini).

Contoh halaman error blog tercinta kita ini.

Sebenarnya halaman error yang ada di blog ini terinspirasi dari blognya Kang Ismet, terus saya iseng iseng deh liat kodenya. Terus saya bumbui deh dengan selera saya sendiri.

Tabel Bacaan

Langkah Pertama Langkah Kedua Langkah Ketiga

Nah daripada banyak basa-basi mending kita langsung saja lihat langkah-langkahnya dibawah ini:

1. Langkah Pertama

Dan untuk langkah yang pertama, yang kita perlukan adalah menambahkan CSS untuk memperindah tampilan halaman error kita nanti. Dan dibawah ini adalah CSS-nya, silahkan tambahkan CSS tepat dibawah kode ]]></b:skin>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
#error-page {
background-color:white;
position:fixed !important;
position:absolute;
text-align:center;
font-family: Oswald,&quot;Arial Narrow&quot;,&quot;Source Sans Pro&quot;,Calibri,Segoe,&quot;Segoe UI&quot;,Frutiger,&quot;Frutiger Linotype&quot;,&quot;DeJavu Sans&quot;,&quot;Helvetica Neue&quot;,Arial,Sans-Serif;
top:0;
right:0;
bottom:0;
left:0;
z-index:99999
}

#error-inner {
margin:11% auto
}

#error-inner .box-404 {
width:200px;
height:200px;
background:#00AFAF;
color:#fff;
font-size:80px;
line-height:200px;
border-radius:10px;
text-shadow: 0 1px 0px #fff,
/*Level 1+*/ 0 2px 0px #ddd,
/*Level 2*/ 0 3px 0px #ccc,
/*Level 3*/ 0 4px 0px #bbb,
/*Level 4*/ 0 5px 0px #aaa,
/*Level 5*/ 0 6px 0px #999,
/*Level 6*/ 0 7px 0px #888,
/*Level 7*/ 0 8px 0px #777,
/*Level 8*/ 0 9px 0px #666,
/*Level 9*/ 0 10px 0px #555,
/*Level 10*/ 0 11px 5px rgba(0, 0, 0, 0.4),
/*Bayangan Hitam untuk Sentuhan Akhir*/ 0 15px 15px rgba(0, 0, 0, 0.4) /*Bayangan Hitam untuk Sentuhan Akhir*/;
margin:0 auto 50px;
position:relative
}

#error-inner h1 {
text-transform:uppercase
}

#error-inner p {
line-height:0.7em;
font-size:15px
}

</style>
</b:if>

2. Langkah Kedua

Untuk selanjutnya mari kita memasang tag kondisional untuk menghilangkan beberapa elemen di blog kita. Tujuannya adalah untuk mempercepat muat atau loading halaman yang error nanti, toh namanya juga halaman yang error kalo masih ada beberapa elemen yang muncul seperti sidebar atau mungkin footer bukan halaman error namanya (kalo menurut saya).

Nah untuk menghilangkan beberapa elemen tersebut sebelumnya cari kode yang seperti ini di template blog kamu:

<header id='header-wrapper' itemscope='' itemtype='http://schema.org/WPHeader'>

Jika tidak ada, pokoknya cari saja yang modelnya seperti ini:

<header id='header-wrapper'>

Atau kamu bisa saja menaruh kodenya dibawah kode 'outer-wrapper':

<div class='cf' id='outer-wrapper'>

Taruh kode dibawah ini tepat diatas kode pembungkus header di blog kamu:

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

Setelah itu mari kita terjun ke bagian bawah blog kamu, dan cari kode pembuka untuk elemen footer atau bagian bawah blog kamu, yang kira-kira kodenya akan berupa seperti kode dibawah ini:

<footer id='footer-wrapper' itemscope='' itemtype='http://schema.org/WPFooter'>

Jika tidak ada, cari saja kode pembuka untuk elemen footer yang ada di blog kamu. Dan setelah ketemu, kemudian salin dan tempelkan kode yang ada dibawah ini tepat diatas kode pembuka footer yang kamu cari tadi:

</b:if>
    </div>  <!-- Penutup Outer Wrapper -->

3. Langkah Ketiga

Untuk langkah yang terakhir silahkan kita intip 'sedikit' kebawah template kamu, atau mungkin bagian kode paling bawah template kamu, intinya cari saja kode ini </body>, dan kemudian salin dan tempelkanlah kode yang ada dibawah ini tepat diatas kode yang kamu cari tadi:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <div id='error-page'>
      <div id='error-inner'>
   <div class='box-404'>404</div>
  <h1>Alamak!</h1>
<p>Halamannya gak ada. Mungkin halamannya sudah dihapus, atau kamu salah nulis URL</p>
<p>Cek lagi URL yang kamu cari atau kembali ke <a href='/' title='Halaman Awal'>Mad Trik</a></p>
      </div>
    </div>
</b:if>

Setelah selesai semuanya. jangan disimpan dulu, karena kodenya masih mentah alias langsung dari blog Mad Trik ada beberapa yang harus kamu ganti terlebih dahulu terus simpan perubahan yang terjadi ditemplate kamu jika semua benar-benar selesai. Dan silahkan lihat hasilnya sendiri. Bagaimana ? sudah gantengkan halaman error di blog kamu.

Jika dilihat kurang menarik atau tidak sesuai dengan keinginan silahkan sesuaikan saja dengan selera kamu.

Itulah pembahasan yang cukup panjang kita kali ini. Bagaimana bingung? susah? masih nggak ngerti?, mari kita diskusikan saja di kolom komentar dibawah ini, dan ceritakan bagian mana yang kamu tidak ngerti atau bagian mana yang susah, OKE.