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.



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!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top