Desain Halaman Error Page 404 di Blogger

Bismillahirrahmanirrahim...

page not found
MULTI PASTE - Sejak ditambahkannya sub menu Search preferences yang terletak di bawah menu Settings pada halaman Dasboard Blogger, BlogSpot sekarang jauh lebih optimal dari sebelumnya.  Salah satu fitur menu Search preferences ini adalah "Pengalihan kesalahan pada saat halaman tidak ditemukan" atau yang umum dikenal dengan "Error Page - 404".  Halaman pengalihan kesalahan ini akan tampil saat link yang rusak diklik dan ia akan memberitahu pengunjung bahwa telah terjadi kesalahan pada halaman tersebut atau halaman telah dihapus. 

Secara default anda dapat mengatur fitur ini, yang terletak di bawah menu Errors and Redirections, anda dapat menambahkan teks sederhana bersama dengan tag HTML di dalam kotak Custom Page Not Found.  Tampilan pesan menggunakan teknik ini terlihat kurang menarik dan oleh karena itu dibutuhkan pendekatan yang lebih kreatif untuk merancang halaman Error Page 404 ini.

Error Page 404 ini tampil dalam bentuk kotak yang di desain menggunakan kode CSS hasil karya Aneesh Joseph yang telah membuat Error Page 404 ini menjadi lebih menarik.  Halaman 404 ini akan memberitahu pengunjung bahwa ia telah menemukan halaman yang salah dan akan memberikan tiga pilihan penting yaitu :

  • << Go Back - Kembali ke halaman sebelumnya.
  • Hubungi Admin dan menginformasikan kepada admin tentang link rusak melalui Contact Form.  Ini penting karena akan membantu anda melacak link yang rusak
  • Dan yang ke tiga menyediakan link ke homepage.

Berikut ini adalah langkah-langkah bagaimana mendesain halaman pengalihan kesalahan Error Page 404.  Cukup ikuti langkah mudah berikut ini.

  • Login ke blogger dengan ID anda
    • Klik link title blog anda pada halaman dashboard blogger
    • Pilih menu Template ->> Edit HTML ->> Proceed
    • Cari kode ]]></b:skin>
    • Paste kode di bawah ini tepat di atasnya
      <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;
      }
      .MP-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>
    • Simpan Template anda dengan menekan tombol Save template
    • Selanjutnya pada halaman dashboard blog anda pilih menu Settings ->> Search preferences
    • Pada bagian Errors and Redirections klik link Edit yang berada di sebelah kanan sub menu Custom Page Not Found seperti gambar di bawah.
     
    • Masukkan kode di bawah ini pada kotak input.
      <!-- MP Template -->
      <div class='MP-404-box'>
        <p style='line-height: 30px'><strong>
      <font color='#ff0000' size='5'>
      Oops!
      </font> <font color='#666666'>
      Sepertinya Anda mengklik link yang rusak atau Halaman yang sudah di hapus. Lakukan salah satu langkah di bawah ini:
      </font></strong></p>
        <ol style='line-height: 25px'>
          <li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
          <li>Laporkan Problem Kepada Kami <a href='http://multipaste.blogspot.com/p/contact-us_05.html'>Klik di Sini</a>&#160;&#160;&#160; (<em>Ini akan membantu kami untuk memperbaikinya</em>) </li>
          <li>Kembali ke Homepage <a href='http://multipaste.blogspot.com/'>Klik di Sini</a>
            <br/></li>
        </ol>
        <p>
          <br/>
          <br/>
          <br/></p>
        <p align='center'><font color='#989898' style='font-size: 150px'><strong>404</strong></font></p>
        <p>&#160;</p>
        <p align='center'/>
        <p align='center'><font size='5'>Page Not Found!</font></p>
      </div>
    • Ganti kode http://multipaste.blogspot.com/p/contact-us_05.html dengan URL Contact Form anda
    • Ganti kode http://multipaste.blogspot.com/ dengan URL homepage blog anda.
    • Sampai di sini proses desain halaman kesalahan Error Page 404 selesai.
    • Untuk melihat hasilnya silahkan ketik pada address bar browser yang anda gunakan URL blog anda dan pada bagian akhir URL tambahkan sembarang kata, untuk menguji kesalahan sebagai contoh http://namablog.blogspot.com/waswiswus dan lihat hasilnya jika berhasil ucapkan Alhamdulillah..