Membuat Halaman Error 404 di Blogger Dengan CSS3

Halaman Error 404
Error 404 atau pesan Halaman Tidak Ditemukan adalah kode respon HTTP standar yang menunjukkan bahwa klien mampu berkomunikasi dengan server, tetapi server tidak bisa menemukan apa yang diminta." Dengan kata sederhana halaman yang akan ditampilkan bila halaman yang sebenarnya tidak ditemukan Maka akan Muncul Error 404 atau pesan Halaman Tidak Ditemukan. Untuk Contoh klik disini
Bagaimana caranya  Membuat Halaman Error 404  di Blogger ? Caranya cukup Mudah silahkan Ikuti petunjuk di bawah ini :



  1. Go To draft.blogger.com › Settings › Search Preferences  ( Setelan  ›  Preferensi penelusuran )
  2. Klik link Edit di sebelah : Custom Page Not Found  ( Pesan Ubahsuaian untuk Laman Tidak Ditemukan )
     Halaman Error 404  di Blogger
  3. Paste kode berikut Ke dalam Kotak Custom Page Not Found tersebut :

    <!-- Default Template -->
    <div class='Error-404-box'>
      <p style='line-height: 30px'><strong>
    <font color='#ff0000' size='5'>
    Oops!
    </font> <font color='#666666'>
    Maaf, kami tidak dapat menemukan halaman yang Anda cari.  Mungkin telah dihapus, namanya berubah, atau sementara tidak tersedia.  Mohon pilih salah satu dari pilihan di bawah ini :
    </font></strong></p>
      <ol style='line-height: 25px'>
        <li><a href='javascript:history.go(-1)'>&#171; Kembali</a> </li>
        <li>Laporkan Masalah kepada kami, Silahkan <a href='http://nirwanasitoeking/p/contact-nirwana-sitoeking-for-any.html'>klik disini</a>&#160;&#160;&#160; (<em>ini akan membantu kami untuk melayani Anda lebih baik</em>) </li>
        <li>Pergi Ke Halaman Depan <a href='http://nirwanasitoeking.blogspot.com/'>klik disini</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>&#160;</p>
      <p align='center'/>
      <p align='center'><font size='5'>Halaman Tidak Ditemukan!</font></p>
    </div>

    Catatan:
    • Anda dapat mengedit teks tebal dengan tulisan apapun yang Anda suka
    • Ganti Link http://nirwanasitoeking.blogspot.com/p/contact-nirwana-sitoeking-for-any.html dengan link halaman kontak Anda
    • Ganti Link  http://nirwanasitoeking.blogspot.com dengan link situs Anda
  4. Klik tombol Simpan perubahan, sampai tahap ini Anda baru setengah jalan Membuat Halaman Tidak Ditemukan! atau Error 404
  5. Sekarang pergi ke Template › Edit HTML
  6. Kemudian cari kode berikut ]]></b:skin> Untuk memudahkan pencarian silahkan tekan Ctrl + F.
  7. Masukan kode CSS di bawah ini tepat di bawah kode tadi yaitu  ]]></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;
    }
    .Error-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 belakang kotak edit silahkan ganti kode warna berikut # FFFFFF dengan yang anda inginkan. Untuk lebar width:98%; silahkan sesuaikan dengan template yang anda pakai.
  8. Simpan template Anda
  9. Selesai.
 Untuk melihat hasilnya Anda bisa mengetikkan apapun setelah alamat blog Anda untuk melihat kode Error 404 muncul. Misalnya seperti:
http://yourblog.blogspot.com/blablabla
atau
http://yourblog.blogspot.com/404
atau
http://yourblog.blogspot.com/isikan-tulisan-apa-saja-di sini
dll
Selamat Mencoba, semoga berhasil!!
Untuk Lebih Banyak lagi tentang Belajar SEO, Tips BloggingWidget Blogger dan banyak lagi  anda bisa berkunjung ke Blog sahabat blogger berikut ( saya banyak belajar dari blog meraka ini ) :
Load disqus comments

0 Komentar