Sarjana Rebahan: CARA MEMBUAT CUSTOM EROR PAGE 404 DI BLOGGER

Pernahkah anda menemukan halaman error di blog? Ketika anda menemukan halaman tersebut kemungkinan halaman atau postingan yang anda tuju tersebut sudah tidak ada atau sudah dihapus oleh pemilik blog.

Error 404 ini sering sekali kita jumpai pada blog orang lain maupun blog sendiri. Kode 404 atau Page Not Found merupakan kode tanggap standar HTTP ataupun HTTPS yang menunjukan pengunjung tetap berada pada blog kita namun blog tidak menemukan apa yang dicari oleh pengunjung maka terjadilah error 404 ini.

Nah disini saya akan bahas tentang bagaimana cara membuat custom page error 404 sesuai keinginan pada template blogger anda.

Langkah pertama masuk terlebih dahulu ke blogger anda kemudian pilih Theme lalu masuk ke Edit HTML.
Masukan kode CSS dibawah <style type='text/css'> atau sebelum </style>

<b:if cond='data:view.isError'><style>
  @import url('https://fonts.googleapis.com/css?family=Ruda:400,700');
  #header, #outer-wrapper, #post-wrapper, #sidebar-wrapper, #content-wrapper, #footer-wrapper, #wrapper, .ignielToTop {display:none}
  body,html {overflow:hidden; margin:0; padding:0; width:100%; min-height:100vh}
  body {background:#fff; color:#1d2129}
  #sr404 {background:#eceeee; text-align:center; margin:auto; font-weight:700; font-size:45px; font-family:'Ruda',sans-serif; position:fixed; width:100%; height:100%; line-height:1.25em; z-index:9999;}
  #sr404 #error-text {position:relative; font-size:40px; color:#666; top:50%; right:50%; transform:translate(50%,-50%);}
  #sr404 #error-text a {color:#888; text-decoration:none}
  #sr404 #error-text p {margin:0!important; letter-spacing:.5px;}>
  #sr404 #error-text span {color:#1E90FF;font-size:100px;}
  #sr404 #error-text a.back {background:#1E90FF;color:#fff;padding:10px 20px;font-size:20px;border:double #fff;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all 0.5s ease-out;}
  #sr404 #error-text a.back:hover {background:#444;color:#fff;border:double #eceeee;}
  #sr404 #error-text a.back:active {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);background:#333;color:#fff;border:double #eceeee;}
  #sr404 #error-text #copyright {font-size:16px}
  #sr404 #error-text #copyright a {color:#008c5f}
  @media only screen and (max-width:640px){
    #sr404 #error-text {font-size:20px;}
    #sr404 #error-text span {font-size:60px;}
    #sr404 #error-text a.back {padding:5px 10px;font-size:15px;}
    #sr404 #error-text a.back:hover, #sr404 #error-text a.back:active {border:0;}
  }
</style></b:if>

Selanjutnya letakan HTML berikut setelah <body>

Save tamplate dan lihat hasilnya.

Jika sudah anda bisa melakukan test pada halaman statis anda untuk melihat hasil dari pemasangan yang telah anda lakukan. Jika berhasil, maka tampilan error 404 anda akan berubah seperti style yang anda pasangkan.

Selamat Mencoba.

Wednesday, April 29, 2020

CARA MEMBUAT CUSTOM EROR PAGE 404 DI BLOGGER

Nurul

0 comments:

Popular Posts

Labels