Membuat 404 Error Page di Blogger

Dengan diperkenalkannya preferensi pencarian terbaru oleh Blogger, blog BlogSpot sekarang jauh lebih dioptimalkan daripada dulu atausebelumnya.
Salah satu fitur adalah " Kesalahan dan pengalihan "The" Error 404 "dalam hal sederhana adalah halaman yang akan muncul saat link yang rusak atau tidak ada diklik dan ia memberitahu pengunjung bahwa halaman tersebut tidak ada atau telah dihapus.

Beban halaman kesalahan di dalam tubuh posting Anda dikelilingi kotak abu-abu kusam. Secara default Anda hanya dapat menambahkan teks biasa bersama dengan tag HTML di dalam " Custom Page Not Found "kotak masukan menggunakan pencarian halaman preferensi pilihan. Tampilan pesan menggunakan teknik ini terlihat cukup jelek dan oleh karena itu kita akan membutuhkan pendekatan yang lebih baik untuk merancang Pesan 404 Not Found untuk blog BlogSpot. Pertama silakan lihat demo agar Anda lebih mengerti dari halaman kesalahan dengan cara menekan tombol di bawah ini.

Lihat Demo

---

Desain Error 404 Halaman Untuk Blogger

---

Alasan mengapa sebuah kotak muncul di sekitar pesan kesalahan ini karena lembar gaya default Blogger untuk pesan status. Karena itu saya akan menimpa style sheet yang ada untuk error_page saja menggunakan pernyataan bersyarat.
Saya akan menggunakan kode CSS yang telah saya buat untuk membuat hal-hal sederhana dan akan menambah sedikit modifikasi untuk membuat kotak kesalahan yang lebih menarik.

Pada halaman 404 saya akan meminta pengunjung bahwa ia telah mendarat ke halaman yang salah dan akan memberikan kepadanya tiga pilihan penting yaitu:

• Kembali ke halaman dari mana ia berasal (disini saya menggunakan Java Script)
• Hubungi Admin dan menginformasikan kepadanya tentang link rusak (Ini akan membantu Anda melacak link yang rusak)
• Dan akhirnya untuk menyediakan link ke homepage.

Jadi mari kita bekerja di blog kita untuk mencapai semua hal di atas. Cukup ikuti langkah mudah berikut untuk menampilkan pesan kesalahan 404 yang unik.

1. Silahkan Anda menuju draft.blogger.com.

2. Lalu klick Setting seperti pada gambar.

3. Lalu klick Preferensi penelusuran (seperti pada gambar)

4. Selanjutnya Anda klick Edit di samping Pesan Khusus untuk Laman Tidak Ditemukan.

5. Sekarang Anda copy code berikut dan letakkan di dalam kotak atau form Pesan Khusus untuk Laman Tidak Ditemukan (seperti gambar di atas) lalu simpan.

<!-- OW Default Template -->
<div class='OW-404-box'>
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a Page that no more exits. Kindly do one of the followings:
</font></strong></p>
  <ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>« Go Back</a> </li>
    <li>Report the Problem to us by <a href='http://otowebsite.blogspot.com/2012/05/contact-me.html'>Clicking Here</a>    (<em>This will help us serve you even better</em>) </li>
    <li>Go To Homepage by <a href='http://www.otowebsite.blogspot.com'>Clicking Here</a>
      <br/></li>
  </ol>
  <p>
    <br/>
    <br/>
    <br/></p>
  <p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
  <p> </p>
  <p align='center'/>
  <p align='center'><font size='5'>Page Not Found!</font></p>
</div>

• Untuk merubah teks pemberitahuan yang akan muncul silahkan Anda rubah teks warna merah dan biru (kalo tidak tau ingin menggantinya dengan teks apa, itu adalah bahasa inggris tinggal Anda rubah saja ke bahasa Indonesia)
• Ganti http://otowebsite.blogspot.com/2012/05/contact-me.html dengan halaman kontact Anda atau dengan halaman apapun yang Anda inginkan.
• Ganti http://www.otowebsite.blogspot.com dengan url/alamat blog Anda.

6. Anda baru setengah jalan, sekarang pergi ke Dasbor ➨ Rancangan ➨ Edit HTML.

7. Selanjutnya Anda copy code berikut dan letakkan di atas kode ]]></b:skin> atau <style> (Bila anda kesulitan mencari kode HTML silahkan Anda lihat Cara Cepat Mencari Kode HTML)

<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
.OW-404-box {
  background:#FFFFFF;
  width:98%;
  margin:10px 0px;
  padding:20px 10px;
  border:1px solid #ddd;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  box-shadow: 5px 5px 5px #CCCCCC;
}
</style>
</b:if>

• Untuk mengubah warna latar silahkan Anda edit kode #FFFFFF (untuk melihat kode warna silahkan klick disini)

8. Simpan template.

---

Apa selanjutnya?

---

Saya sedang membuat beberapa desain baru yang lebih menarik untuk tampilan halaman 404 error dan akan berbagi terbaru 404 template segera.

Oke saya rasa cukup untuk kali ini, Silahkan tinggalkan tanggapan atau komentar Anda!