Cara Membuat Halaman Error 404 Simple Dan Keren

Mungkin tutorial seperti ini tidak terlalu banyak yang mencari, karena saya tadi sudah selesai membuat halaman Error pada blog ini.

maka untuk itu saya akan share kepada anda tentang Bagaimana Cara Membuat Halaman Error 404 dengan tampilan yang sangat sederhana sekali.

Untuk anda yang ingin membuat Halaman Error 404 ini untuk blog anda silahkan kalian backup terlebih dahulu template lama anda, setelah itu baru kita lakukan caranya, mari kita simak langsung bagaimana cara membuat dan menambahkan kode-kode sederhananya.

Membuat Halaman Error 404

1. Loggin Blogger.com
2. Klik nama blog anda
3. Template - Edit HTML
4. Masukkan kode dibawah ini tepat diatas kode </style> atau ]]><b:skin>
#error-page{background-color:#474747;position:fixed !important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}#error-inner{margin:11% auto}#error-inner .box-404{position:relative;font-weight:bold;width:220px;height:210px;background:#cd0000;color:#fff;font-size:80px;line-height:200px;margin:0 auto 25px}#error-inner .box-404::after{content:&quot;&quot;;width:0; height:0; position:absolute;top:0; right:0; border-width:30px; border-style:solid; border-color:#e9e9e9 #e9e9e9 transparent transparent; display:block}#error-inner .box-404::before{content:&quot;&quot;;width:0; height:0; position:absolute;top:0; left:0; border-width:30px; border-style:solid; border-color:#e9e9e9 transparent transparent #e9e9e9; display:block}#error-inner .boxx-404::after{content:&quot;&quot;;width:0; height:0; position:absolute;bottom:0; left:0; border-width:30px; border-style:solid; border-color:transparent transparent #e9e9e9 #e9e9e9; display:block}#error-inner .boxx-404::before{content:&quot;&quot;;width:0; height:0; position:absolute;bottom:0; right:0; border-width:30px; border-style:solid; border-color:transparent #e9e9e9 #e9e9e9 transparent; display:block}#error-inner h2{text-transform:uppercase;color:#cd0000;font-size:50px;margin:0 auto 20px;font-family:monospace}#error-inner h1{text-transform:uppercase;color:#E4E4E4}#error-inner p{line-height:0.7em;font-size:15px;color:#999}
5. Pindah kebawah sekali, temukan kode </body> dan masukkan lagi kode ini diatasnya
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <div id='error-page'>
<div id='error-inner'>
<h2>Error</h2>
      <div class='box-404'><div class='boxx-404'>404</div></div>
      <h1>Halaman tidak ditemukan</h1>
  <p>Kemungkinan halaman telah dihapus, atau anda salah menulis URL blog<br/><br/>
    Kembali ke beranda <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a></p>
    </div>
      </div>
  </b:if> 
6. Simpan template: Lihat contohnya disini http://multiajaib.blogspot.com/4... 

Yups... mudah sekali bukan membuat halaman error 404 nya, nah mungkin bagi anda yang telah mencobanya, pastinya berhasil dong. Bagi yang belum berhasil silahkan ulangi lagi langkah-langkahnya dengan teliti. Jika masih bingung tanyakan dikolom komentar dibawah ini. Terima kasih.

Cara Membuat Halaman Error 404 Simple Dan Keren Rating: 4.5 Diposkan Oleh: Al Fikri

4 komentar:

  1. Artikelnya tentang membuat page eror ini sangat sederhana dan saya telah menerapkannya hehe

    ReplyDelete
    Replies
    1. Wah.. hebat nih :)
      makasih ya mas Abu :-d

      Delete
  2. thanks gan! saya sudah praktekkan ke blog ane nih. Mantap... Sebab yang sederhana dan simpel seperti ini lebih enak dilihat ketimbanh yg terlalu banyak efeknya...

    ReplyDelete
    Replies
    1. Benar sekali, yang banyak efek-efeknya malah gak enak sama sekali dilihat menurut saya :)

      Delete

Apa tanggapan anda tentang artikel diatas?