Cara Membuat Laman Khusus Error Page

Kali ini saya akan memberikan tutorial dasar blogger tentang Cara Membuat Laman Khusus Error Page untuk blogspot terutama, laman error page sebenarnya tidak begitu signifikan pengaruhnya terhadap SEO atau apapun itu yang berhubungan dengan Search Engine, namun adanya desain yang sedikit lebih menarik pada saat Error hal itu pun menambah kesan cantik untuk blog :D.
Oke, sebenarnya Error Page bisa kita desain dengan cara membungkus kode Error Page kedalam tag kondosional khusus Error Page yaitu <b:if cond='data:blog.pageType == &quot;error_page&quot;'>.

Apa itu Tag Kondosional ?
Tag Kondosional itu adalah tag yang ada kondosionalnya =D. Ok ralat, Tag Kondosional adalah sebuah tag yang berfungsi untuk membuat sebuah kode elemen HANYA jalan di kondisi tertentu sesuai Tag Kondosionalnya masing-masing. Tag Kondosional sebenarnya punya 2 perintah yaitu "==" (tanpa tanda kutip) yang berarti Hanya Dihalaman Yang Dimaksud dan "!=" yang berarti Kecuali Halaman Yang Dimaksud. Contohnya untuk yang "==", kita ingin menghilangkan header di halaman khusus artikel, kita bisa gunakan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#header-wrapper {display:none}
</style>
</b:if>

Apa yang terjadi ?, iya tentu Header akan hilang entah kemana di halaman artikel namun tetap muncul dihalaman lain kecuali artikel. Saya harap anda dapat mempunyai bayangan sedikit mengenai Tag Kondosional.

Oke cukup tentang Tag Kondosionalnya, kita kembali ke bahasan. Silahkan cek link dibawah.

Demo

Sederhana saja, namun kamu bisa ubah sesuka hati kamu. Oke ikuti langkah dibawah.

Letakkan kode ini diatas </head>, namun jika templatemu sudah terdapat meta tag kamu bisa taro diatasnya supaya keliatan :D.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <title>404 :(</title>
    <b:else/>
    <title><data:blog.pageName/></title>
</b:if>

Apa fungsi kode diatas ? Kode diatas berfungsi mengatur Title yang terletak diatas Address Bar Browser. (Silahkan diubah sesuka hati)

Yang kedua letakkan kode dibawah ini diatas </head> 

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.bloginfo, #header, #outer-wrapper, #post-wrapper, #sidebar-wrapper, #content-wrapper,#footer-wrapper {display:none;}
.container404{transition:all .3s;margin:auto;padding-top:16%;width:400px;height:auto;text-align:center;animation: ticking 1s infinite;}
.body404 {background:#444;width:100%;height:100%;position:absolute;animation: body 2s infinite}
.container404:hover {animation:none}
.container404 h1 {font-size:150px;color:#ccc;animation: judul 1s infinite}
.container404 a {font-size:20px;color:#ccc;text-transform:uppercase}
@keyframes ticking {
    0%   {transform:scale(1.0)}
    15%  {transform:scale(1.1)}
}
@keyframes judul {
    0%   {color:#ddd}
    15%  {color:#eee}
}
@keyframes body {
    0%   {background:#444}
    15%  {background:#333}
}
</style>
</b:if>

Kode apa itu ? Itu adalah CSSnya yang mengatur desain dari Error Page nya, isinya bisa kita lihat saya menghilangkan beberapa elemen seperti bloginfo,header,outer,post-wrapper dan lain-lain. Dan juga saya menggunakan keyframes  yang berfungsi sebagai custom animation yang saya atur secara infinite yang artinya bergerak tanpa batas berhenti, tetapi akan berhenti jika kursor diatas tulisan seperti yang di perintahkan di .container404:hover {animation:none}. Dalam keyframes saya membuat salah satu perintah untuk membuat containernya membesar dan mengecil dengan menggunakan transform:translate(x.x).

Terakhir, kita letakan kode pemanggilnya.

<div class='body404'>
  <div class='container404'>
     <h1 class='error'>404 :(</h1>
     <a href='/'>Back To The Homepage</a>
  </div>
</div>

Apakah kode diatas ?  nah ini adalah HTMLnya yang fungsinya membangun elemen sesuai perintah desain dari CSS tadi. Letakan saja diatas </body>.

Selesai saya harap penjelasan ini dapat dimengerti oleh para blogger. Jika ada kode yang tidak jalan bisa komentar dibawah. Sekian terima kasih.

Artikel Terkait