Custom HTTP Error 404 Blogger ~ Belajar Blog

Kadang-kadang ketika kita mencoba untuk mengunjungi suatu halaman web, kita bertemu dengan pesan kesalahan HTTP. Pesan itu muncul karena ada ketidak beresan pada server web. Namun pada beberapa kasus pesan itu bisa saja muncul karena kesalahan yang kita buat, tetapi pada umumnya pesan itu muncul karena terjadi kesalahan pada situs. Setiap jenis kode kesalahan HTTP memiliki maksud tertentu yang digunakan untuk mengidentifikasi bagian yang mengalami kesalahan pada situs yang bersangkutan. Misalnya, jika kita mencoba mengakses sebuah halaman yang tidak tersedia pada sebuah situs web, maka halaman akan diisi dengan pesan kesalahan 404. Sekarang mungkin diantara kita ada yang bertanya-tanya, apa saja kesalahan yang sering terjadi dan dialami ketika sedang melakukan surfing web? Dibawah ini akan dipaparkan 5 kesalahan yang paling sering terjadi menurut Google, namun tidak akan dibahas secara rinci. Jika anda penasaran tentang kode-kode kesalahan pada situs web secara rinci, silahkan telusuri situs 404 Error Pages yang khusus membahas tentang hal tersebut.

Demo Template HTTP Error 404

5 Pesan Kesalahan HTTP (HTTP Error)

Dibawah ini akan diurutkan 5 pesan kesalahan HTTP yang paling umum ditemukan menurut Google yang disusun secara terbalik.

5. HTTP Error 401 (Unauthorized)

Kesalahan ini terjadi bila pengunjung situs web mencoba untuk mengakses sebuah halaman web yang dibatasi (restricted) tapi tidak syah (unauthorized) untuk diakses. Pesan error 401 biasanya terjadi karena usaha login yang gagal.

4. HTTP Error 400 (Bad Request)

Pesan kesalahan ini di sampaikan oleh server web untuk menginformasikan bahwa aplikasi yang kita gunakan (misalnya web browser) tidak mampu mengakses atau menjangkau halaman dengan baik, atau karena permintaan mengalami hambatan diperjalanan.

3. HTTP Error 403 (Forbidden)

Kesalahan ini mirip dengan HTTP Error 401, tapi perhatikan perbedaan antara yang tidak sah (unauthorized) dan di larang (forbidden). Dalam hal ini mungkin saja kita diberi kesempatan dan berhasil login kedalam situs yang bersangkutan. Pesan error 403 dapat terjadi misalnya jika ktia mencoba untuk mengakses sebuah direktori (terlarang) di situs web tersebut.

2. HTTP Error 404 (Not Found)

Kebanyakan orang mengenali pesan error yang satu ini. Sebuah pesan error 404 terjadi ketika kita mencoba untuk mengakses sumber daya pada web server (biasanya halaman web) yang tidak tersedia. Hal ini terjadi misalnya karena link rusak, kesalahan pengetikan URL, atau webmaster telah memindahkan halaman yang sedang diakses ke tempat lain (atau justru halaman yang di maksud di hapus). Untuk memperbaiki penampilan pesan kesalahan 404, beberapa website membuat halaman kustom (namun tidak sedikit yang kemudian mengacuhkannya, seperti saya...).

1. HTTP Error 500 (Internal Server Error)

Deskripsi dari pesan kesalahan ini telah banyak diceritakan. Ini adalah pesan kesalahan umum ketika web server menemukan beberapa kesalahan internal. Sebagai contoh, server web kelebihan beban sehingga tidak dapat menangani permintaan dengan baik. Jika dilihat dari statistik pencarian Google, pesan kesalahan ini paling banyak ditemukan dan menunjukan 2 kali lebih banyak dari pada pesan kesalahan 404. Selanjutnya kita akan membahas cara mendesain tampilan HTTP Error 404 khusus untuk Blogger. Sedang pesan kesalahan lain tidak akan dibahas karena memang para pengguna blogger tidak pernah mengetahui dan diberi kesempatan untuk mengakses mesin blogger. Maka dari itu, kita hanya khusus mendesain HTTP Error 404 saja.

Skenario HTML

Untuk menampilkan pesan error pada halaman yang tidak tersedia maka dipersiapkan halaman HTML seperti dibawah ini. Skenario HTML dibawah ini boleh disisipkan pada halaman terpisah (halaman statis) atau disisipkan pada tag body. Dibawah ini hanyalah skenario contoh jadi silahkan saja di kembangkan sesuai dengan imajinasi anda.

<div id='error'>
 <div id='tirai-kiri'/>
 <div id='tirai-kanan'/>
 <div id='wadah'>
  <div class='tengah'>
  <div class='box-atas'/>
   <div class='box'>
    <div id='halaman'>
     <h2>404 - Halaman Tidak Tersedia</h2>
     <p>Ouuupsss! Ma&#39;af. Halaman yang anda cari tidak bisa ditampilkan.</p>
     <p><a expr:href='data:blog.homepageUrl'>Beranda</a></p>
    </div>
   </div>
  <div class='box-bawah'/>
  </div>
 </div>
</div>

Skenario CSS

Kode CSS dibawah ini diperlukan untuk memberikan penampilan yang lebih menarik pada skenario HTML di atas. CSS ibarat make-up untuk memanipulasi halaman HTML agar tampil lebih meyakinkan dan menarik. Silahkan dikembangkan, dan hasilnya harus lebih bagus dari contoh...

#error {
 background-color: #F2F2F2;
 background-image: url('https://lh6.googleusercontent.com/-e0_3IuBZwgs/TyvWQEKqSzI/AAAAAAAAF_w/fuoTc-tNh2Y/d/refreshbg.png');
 background-repeat: repeat;
 color: #555555;
 height: 100%;
 left: 0;
 margin: 0;
 padding: 0;
 position: fixed;
 text-align: center;
 top: 0;
 width: 100%;
 z-index: 999;
 line-height: 170%;
}
#error #halaman {
 position: relative;
 height: auto !important;
 height: 100%;
 min-height: 99%;
}
#error #halaman h2 {
 margin: 1em 0;
}
#error #tirai-kiri{
 position:absolute;
 top:0;
 left:0;
 width:155px;
 height:510px;
 background-image: url('https://lh6.googleusercontent.com/-wct7jeYp2cg/T3MaVzMDJvI/AAAAAAAAGPk/arvNoSn7pVA/s1600/tirai-kiri.png');
 background-repeat : no-repeat;
 z-index: 1;
}
#error #tirai-kanan{
 position:absolute;
 top:0;
 right:0;
 width:155px;
 height:510px;
 background-image: url('https://lh5.googleusercontent.com/-zMCL2WLx8KI/T3MaUklLOGI/AAAAAAAAGPc/MMswCsLnHq0/s1600/tirai-kanan.png');
 background-repeat : no-repeat;
 z-index: 1;
}
#error #wadah {
 margin-top: 120px;
}
#error .tengah {
 margin: 0 auto;
 width: 920px;
}
#error .box-atas, #error .box-bawah {
 background-image: url('https://lh6.googleusercontent.com/-0viaSIbOuI0/T3MaRZ99_aI/AAAAAAAAGPQ/i7TVEVYzKUE/s1600/box-sprite.png');
 background-repeat: repeat;
 background-position: 0 0;
 height: 43px;
 margin: 0 -12px;
 width: 944px;
}
#error .box-atas {
 background-image: url('https://lh6.googleusercontent.com/-0viaSIbOuI0/T3MaRZ99_aI/AAAAAAAAGPQ/i7TVEVYzKUE/s1600/box-sprite.png');
 background-repeat: no-repeat;
 background-position: 0 -43px;
}
#error .box {
 background-image: url('https://lh3.googleusercontent.com/-Eomlz27Ho5c/T3MaRM7be5I/AAAAAAAAGPM/z8xCVXmpA9o/s1600/box-horizontal.png');
 background-repeat: repeat-y;
 background-position: 0 0;
 min-height: 200px;
 padding: 10px 50px;
}

Skenario Kondisi (Conditional Tag)

Skenario kondisi adalah kunci untuk mendeteksi halaman yang sedang di akses oleh pengunjung. Kita asumsikan, jika halaman yang sedang di akses tersedia maka halaman (termasuk isi artikel, sidebar, header, footer dan lain-lainnya) akan di tampilkan utuh, namun jika halaman yang di akses itu tidak tersedia/tidak ada, maka halaman HTTP Error 404 akan di tampilkan. Sebenarnya cara ini telah banyak dibahas oleh para Blogger baik Blogger Lokal maupun Blogger Interlokal, silahkan anda cari-cari cara yang terbaik dalam menggunakan tag kondisi (conditional tag).

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

<!-- disini halaman yang tersedia baik itu artikel, sidebar, header, footer dan lain-lain -->

</b:if>

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

<!-- disini halaman error yang akan tampil ketika halaman tidak tersedia -->

</b:if>

Skenario kondisi diatas sebenarnya memanfaatkan metode pemeriksaan URL, jika dibaca maka:

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

Jika kondisi URL (data:blog.pageType) tidak sama (!=) dengan halaman error (error_page) maka tag berikutnya akan di akses

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

Jika kondisi URL (data:blog.pageType) sama (==) dengan halaman error (error_page) maka tag berikutnya akan di akses

Integrasi HTTP Error 404 pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Dasbor - Template - Edit HTML
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3 (Lihat Skenario CSS):

#error {
 background-color: #F2F2F2;
 background-image: url('https://lh6.googleusercontent.com/-e0_3IuBZwgs/TyvWQEKqSzI/AAAAAAAAF_w/fuoTc-tNh2Y/d/refreshbg.png');
 background-repeat: repeat;
 color: #555555;
 height: 100%;
 left: 0;
 margin: 0;
 padding: 0;
 position: fixed;
 text-align: center;
 top: 0;
 width: 100%;
 z-index: 999;
 line-height: 170%;
}
#error #halaman {
 position: relative;
 height: auto !important;
 height: 100%;
 min-height: 99%;
}
#error #halaman h2 {
 margin: 1em 0;
}
#error #tirai-kiri{
 position:absolute;
 top:0;
 left:0;
 width:155px;
 height:510px;
 background-image: url('https://lh6.googleusercontent.com/-wct7jeYp2cg/T3MaVzMDJvI/AAAAAAAAGPk/arvNoSn7pVA/s1600/tirai-kiri.png');
 background-repeat : no-repeat;
 z-index: 1;
}
#error #tirai-kanan{
 position:absolute;
 top:0;
 right:0;
 width:155px;
 height:510px;
 background-image: url('https://lh5.googleusercontent.com/-zMCL2WLx8KI/T3MaUklLOGI/AAAAAAAAGPc/MMswCsLnHq0/s1600/tirai-kanan.png');
 background-repeat : no-repeat;
 z-index: 1;
}
#error #wadah {
 margin-top: 120px;
}
#error .tengah {
 margin: 0 auto;
 width: 920px;
}
#error .box-atas, #error .box-bawah {
 background-image: url('https://lh6.googleusercontent.com/-0viaSIbOuI0/T3MaRZ99_aI/AAAAAAAAGPQ/i7TVEVYzKUE/s1600/box-sprite.png');
 background-repeat: repeat;
 background-position: 0 0;
 height: 43px;
 margin: 0 -12px;
 width: 944px;
}
#error .box-atas {
 background-image: url('https://lh6.googleusercontent.com/-0viaSIbOuI0/T3MaRZ99_aI/AAAAAAAAGPQ/i7TVEVYzKUE/s1600/box-sprite.png');
 background-repeat: no-repeat;
 background-position: 0 -43px;
}
#error .box {
 background-image: url('https://lh3.googleusercontent.com/-Eomlz27Ho5c/T3MaRM7be5I/AAAAAAAAGPM/z8xCVXmpA9o/s1600/box-horizontal.png');
 background-repeat: repeat-y;
 background-position: 0 0;
 min-height: 200px;
 padding: 10px 50px;
}

Langkah 5
Cari kode dibawah ini:

<body

Langkah 6
Masukan (copy paste) kode dibawah ini tepat di bawah kode pada langkah 5 (Lihat Skenario Kondisi):

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

Langkah 7
Cari kode dibawah ini:

</body>

Langkah 8
Masukan (copy paste) kode (X)HTML dibawah ini tepat diatas kode pada langkah 7 (Lihat Skenario HTML dan Skenario Kondisi):

</b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error'>
 <div id='tirai-kiri'/>
 <div id='tirai-kanan'/>
 <div id='wadah'>
  <div class='tengah'>
  <div class='box-atas'/>
   <div class='box'>
    <div id='halaman'>
     <h2>404 - Halaman Tidak Tersedia</h2>
     <p>Ouuupsss! Ma&#39;af. Halaman yang anda cari tidak bisa ditampilkan.</p>
     <p><a expr:href='data:blog.homepageUrl'>Beranda</a></p>
    </div>
   </div>
  <div class='box-bawah'/>
  </div>
 </div>
</div>
</b:if>

Langkah 9
Simpan template blog dan preview blog anda, masukan alamat url artikel sembarangan. Misal:

http://esingkatan.blogspot.com/404

Langkah 10
Bagaimana hasilnya...

Demo Template HTTP Error 404

Unduh Template HTTP Error 404

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Pranala Luar :
[1] Wikipedia : HTTP 404
[2] Wikipedia : List of HTTP status codes

Belajar Blog

Wednesday, March 28, 2012