Mengatasi dan Mendesain Halaman Eror Page 404 di Blogger

Apa itu error page 404?

Error page 404 adalah suatu halaman yang tidak di temukan ketika link tersebut diklik. Hal ini mungkin dikarenakan oleh halaman tersebut telah dihapus oleh pemiliknya atau disebabkan oleh faktor lain.

Bagaimana mencegah sehingga hal tersebut tidak terjadi?

Periksa secara berkala link-link blog anda di https://www.google.com/webmasters/tools/ dan hapus halaman yang sudah error tersebut. Nah jika hal tersebut tidak sempat anda lakukan, maka inilah gunanya untuk mendesain sebuah halaman error page 404.

LIVE DEMO
Copy URL dibawah ini dan pastekan pada address bar kemudian tekan enter !
http://www.lost-sector.net/demo-page-not-found-error-404.html

Langkah-langkah mendesain error page 404

• Hal pertama yang harus anda lakukan yaitu login ke akun blogger
• Pilih Template » Edit HTML » Expand Template Widget
• Cari ]]></b:skin> (Gunakan CTRL + F untuk mempermudah pencarian) dan Copy paste kode di bawah ini tepat di atas ]]></b:skin>.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<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;
}
.lostsector-design-error-page-404 {
  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>

• Simpan Template. 
• Nah langkah selanjutnya, masuk ke Setelan » Preferensi Penelusuran » Kesalahan dan Pengalihan. (Klik gambar untuk lebih jelasnya)

• Copy paste kode di bawah ini dan pastekan ke dalam form Kesalahan dan Pengalihan.

<!-- lostsector design -->
<div class='lostsector-design-error-page-404'>
<p style='line-height: 30px'><strong>
<font color='#ff0000' size='15'>
<center>Oops!</center>
</font><br/>
<font color='#000000'>
Sepertinya link yang anda klik sudah terhapus atau rusak...!!! Kami mohon maaf atas ketidaknyamanan ini.</font></strong></p>
<ol style='line-height: 25px'>
<li>Klik<a href='javascript:history.go(-1)'><b>DISINI</b></a> untuk kembali ke halaman sebelumnya<li>Klik<a href='http://lostsector.blogspot.com/p/contact-us.html'><b>DISINI</b></a> untuk melaporkan masalah link error ini kepada kami (Ini akan membantu kami untuk memperbaikinya) </li>
<li>Klik<a href='http://lostsector.blogspot.com/'><b>DISINI</b></a> untuk kembali ke homepage<br/></li>
</ol>
<p>
<br/>
<br/>
<br/></p>
<p align='center'><font color='#FF0000' style='font-size: 30px'><strong>Error Page 404</strong></font></p>
<p>&#160;</p>
<p align='center'/>
<p align='center'><font size='5'>Artikel yang anda cari tidak ditemukan...!!!</font></p></div>

Keterangan :
Warna Merah, ganti dengan URL blog anda
Warna Biru, silahkan di sesuaikan

• Simpan dan lihat haslinya.

Semoga bermanfaat. Salam Blogger...!!!