Membuat dan Memasang Error Page 404 Blogger

Kali ini kenny ingin membagikan tutorial membuat dan memasang custom error page 404 pada blogger.

Error page ini sendiri merupakan kelanjutan dari artikel sebelumnya Page 404 Unik Animasi Browser dimana disana kenny tidak mencantumkan cara memasang halaman error pada blog.

Halaman error blog biasanya terjadi karena salah penulisan link, atau konten yang telah terhapus. Halaman error 404 wajib dibuat untuk memberitahukan pada setiap pengunjung bahwa konten telah terhapus atau diganti.

Karena itu membuat atau mengganti halaman error blogger wajib dilakukan.

Umumnya blogger telah menambahkan halaman error 404 pada setiap blog yang berplatfrom blogger.com secara default, artinya setiap blog yang terbuat atau terdaftar diblogger telah memiliki error page 404 default buatan dari blogger.com.

Namun tampilan dari error blogger ini sangat sederhanya dan justru sangat ketinggalana zaman, oleh sebab itu banyak tutorial membuat custom halaman 404 pada blogger diinternet.

Termasuk blog kenny ini akan membagikan cara mengganti halaman error page 404 pada blog blogger dengan gambar custom.

Berikut ini tutorialnya.

Mengganti dan Memasang error halaman 404 blogger dengan gambar

Peringatan :

Lakukan backup tempalate agar jika terjadi sesuatu yang tidak diinginkan kalian masih memiliki cadangan templatenya.

1. Log in Blogger

2. Klik Tema > Edit HTML

3. Copy kode CSS dibawah ini dan paste diatas tag </head>

 <!-- ERROR PAGE CUSTOM CSS Kenscripts-->
 <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 {display:none}
   body,html {overflow:hidden; margin:0; padding:0; width:100%; min-height:100vh}
   body {background:#fff; color:#1d2129}
   #kenscripts404 {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavFeF7tmtboeYouK-1brZHBak_RCrKEd2vHSMvci9KpBSBT3pJz2CjZF6laxVPdidH0mZAGStZm3hmbRYiKOE3TeY0X6qyaS5m9TLbjqBe3hh-yKb5ZcE3p2b0y02cxA2VXXepzB3KEE/s1600/Re-Creator.png);background-position: center center; background-attachment: fixed;background-repeat: no-repeat; 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;}
   #kenscripts404 #error-text {position:relative; font-size:40px; color:#fff; top:50%; right:50%; transform:translate(50%,-50%);}
   #kenscripts404 #error-text a {color:#fff; text-decoration:none}
   #kenscripts404 #error-text p {margin:0!important; letter-spacing:.5px;}
   #kenscripts404 #error-text span {color:#fff;font-size:100px;}
   #kenscripts404 #error-text a.back {text-shadow: -1px 3px 4px black;background:#1e00ff;color:#fff;padding:10px 20px;font-size:20px;border-radius: 5px;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all 0.5s ease-out;}
   #kenscripts404 #error-text a.back:hover {background:#444;color:#fff;}
   #kenscripts404 #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;}
   #kenscripts404 #error-text #copyright {font-size:16px}
   #kenscripts404 #error-text #copyright a {color:#fff}

   @media only screen and (max-width:640px){
    #kenscripts404{background-position: top right ;}
    #kenscripts404 #error-text {font-size:30px;background:#02020254; padding: 10px;top:75%;}
    #kenscripts404 #error-text span {font-size:60px;}
    #kenscripts404 #error-text a.back {padding:10px 20px;font-size:15px;}
    #kenscripts404 #error-text a.back:hover, #kenscripts404 #error-text a.back:active {border:0;}
   }
  </style>
 </b:if>

Catatan :

perhatikan link gambarnya, gantilah dengan link gambar custom kalian. (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavFeF7tmtboeYouK-1brZHBak_RCrKEd2vHSMvci9KpBSBT3pJz2CjZF6laxVPdidH0mZAGStZm3hmbRYiKOE3TeY0X6qyaS5m9TLbjqBe3hh-yKb5ZcE3p2b0y02cxA2VXXepzB3KEE/s1600/Re-Creator.png)

4. Lalu copy kode HTML dibawah dan pastekan dibawah <body>.

 <!-- ERROR PAGE Kenscripts-->
 <b:if cond='data:view.isError'>
   <div id='kenscripts404'>
     <div id='error-text'>
       <span>404</span>
       <p>HALAMAN TIDAK DITEMUKAN!</p>
       <p><a class='back' href='/' expr:title='data:blog.title'>Kembali</a></p>
       <div id='copyright'>
         <a href='/' expr:title='data:blog.title'><data:blog.title/></a> © 2016 - <script>document.write(new Date().getFullYear())</script>. All Rights Reserved
         </div>
     </div>
   </div>
 </b:if>

5. Done. Lihat Juga : Cara redirect halaman error blog.

Coba lakukan pengecekan apakah error page custom berfungsi dengan benar.

Itulah cara mengganti alam default error page 404 blogger menjadi gambar.

Terima kasih telah berkunjung.