Tutorial Membuat Error Page Keren di Website

Tutorial Membuat Error Page Keren di Website - Ada yang pernah tau gak sih kegunaannya halaman Error 404 ? Halaman Error 404 ini adalah kode status dari sistem HTTP, yang artinya halaman tidak ditemukan atau Page Not Found. Sebenernya gak harus 404 juga bisasih, saya sendiripun kurang begitu mengerti dengan simbol 404, jadi saya gak bisa menjelaskan apa arti simbol angka tersebut.

Oiya Ketika Kamu membuat Halaman Error Termasuk salah satu penilaian tambahan mesin pencari terhadap sebuah Website/blog. Ibaratnya, ini sebagai isyarat pada pengunjung, bahwa ada kesalahan yang terjadi. Bisa kesalahan itu karena mereka sendiri karena salah ketik alamat, atau karena si admin blog yang salah dalam membuat sebuah link. Istilahnya, pengunjung harus diberitahu akan hal ini dengan fair, sehingga mereka tidak lagi bingung kenapa hal itu terjadi.


Kali Codepelajar.com berkesempatan membuat sebuah Custom Halaman Error yang cukup menarik dengan animasi2 yang membuat mata betah dan pastinya Website/Blog kamu akan terlihat Professional ketika memakai Custom Halaman Error ini. yuk langsung aja ikuti tutorial berikut ini;

Cara memasang Custom Eror Keren Page Di Blogger

    • Masuk ke editor Tema Blogger kamu
    • Pasanglah Source Code kondisi untuk Halaman Error berikut SESUDAH </b:skin>
    • <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
      <!--HALAMAN ERROR BY CODEPELAJAR.COM-->
      <div class='Pelajar'>
        <header class='Pelajar__content'>
          <h1 class='Pelajar__title'>ERROR 404 ( &#865;&#9673; &#860;ʖ &#865;&#9673;)</h1>
          <div class='Pelajar__text'>It seems like we couldn&#39;t find the page you were looking for.</div>
        </header>
        <footer class='Pelajar__footer'>
          <a expr:href='data:blog.homepageUrl' class='ripple tombol'>BACK TO PAGE</a>
        </footer>
        <div class='wave'/>
        <div class='wave wave2'/>
        <div class='wave wave3'/>
      </div>
      
      <style>@font-face{font-family:'Work Sans';font-style:normal;font-weight:300;src:local('Work Sans Light'),local('WorkSans-Light'),url(https://fonts.gstatic.com/s/worksans/v2/FD_Udbezj8EHXbdsqLUpl3hCUOGz7vYGh680lGh-uXM.woff) format('woff')}*,*::before,*::after{box-sizing:border-box}html,body{font-size:12px;overflow:hidden;text-align:center;font-family:'Work Sans',sans-serif;line-height:1.4;overflow:hidden;width:100%}.Pelajar,html,body{height:100vh}@keyframes charge{from{transform:translateY(2rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes wave{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.Pelajar__content{color:#fff;font-weight:300;padding:0 2rem}.Pelajar__content,.Pelajar__footer{width:100%;position:relative;z-index:100}.Pelajar,.Pelajar__content,.Pelajar__footer{display:flex;align-items:center;justify-content:center}.Pelajar,.Pelajar__content{flex-direction:column}.Pelajar__footer{flex-wrap:wrap;max-width:600px;opacity:0;animation:charge .5s .5s forwards}.Pelajar__subtitle,.Pelajar__title{margin:0}.Pelajar__footer a{font-size:20px;color:#fff;padding:14px;background-color:rgba(0,0,0,.5);margin:2px;border-radius:3px;width:51px;transition:background .3s}.Pelajar__footer a:active,.Pelajar__footer a:focus,.Pelajar__footer a:hover{text-decoration:none}.Pelajar__footer a:hover{background-color:rgba(0,0,0,.9)}.Pelajar__subtitle,.Pelajar__text,.Pelajar__title{backface-visibility:hidden}.Pelajar__title{font-size:2.4rem;font-weight:300;opacity:0;animation:charge .5s forwards}.Pelajar__text{max-width:50rem;font-weight:300;padding:2rem 0;font-size:1.3rem;color:rgba(255,255,255,.8);opacity:0;animation:charge .5s .3s forwards}@media (min-width:768px){html{font-size:14px}.Pelajar__title{font-size:3.4rem}.Pelajar__text{font-size:1.5rem}}.wave{opacity:.6;position:absolute;bottom:40%;left:50%;width:6000px;height:6000px;background:#000;margin-left:-3000px;transform-origin:50% 48%;border-radius:46%;animation:wave 12s infinite linear;pointer-events:none}.wave2{animation:wave 28s infinite linear;opacity:.3}.wave3{animation:wave 20s infinite linear;opacity:.1}.wave{background:#000}.Pelajar{background-color:#73e8ff}.ripple{background-position:center;transition:background 0.8s}.ripple:hover{background:#37474F radial-gradient(circle,transparent 1%,#263238 1%) center/15000%}.ripple:active{background-color:#37474F;background-size:100%;transition:background 0s}a.tombol{width:30%;border:none;border-radius:2px;padding:12px 18px;font-size:16px;text-transform:uppercase;cursor:pointer;color:white;background-color:#333;box-shadow:0 0 4px #999;outline:none}</style>
      </b:if>
    • Jika sudah Save Template/Tema.

Cara memasang custom eror page keren di Wordpress

    • Masuk ke Theme Editor > Cari file 404.php
    • Lalu Copy dan terapkan Source Code Berikut di file tersebut.
    • <!--HALAMAN ERROR BY CODEPELAJAR.COM-->
      <div class='Pelajar'>
        <header class='Pelajar__content'>
          <h1 class='Pelajar__title'>ERROR 404 ( &#865;&#9673; &#860;ʖ &#865;&#9673;)</h1>
          <div class='Pelajar__text'>It seems like we couldn&#39;t find the page you were looking for.</div>
        </header>
        <footer class='Pelajar__footer'>
          <a href="URL HOMEPAGE WEBSITE KAMU" class='ripple tombol'>BACK TO PAGE</a>
        </footer>
        <div class='wave'/>
        <div class='wave wave2'/>
        <div class='wave wave3'/>
      </div>
      
      
      <style>
      /*==============================
      HALAMAN ERROR BY CODEPELAJAR.COM
      ================================*/
      @font-face{font-family:'Work Sans';font-style:normal;font-weight:300;src:local('Work Sans Light'),local('WorkSans-Light'),url(https://fonts.gstatic.com/s/worksans/v2/FD_Udbezj8EHXbdsqLUpl3hCUOGz7vYGh680lGh-uXM.woff) format('woff')}*,*::before,*::after{box-sizing:border-box}html,body{font-size:12px;overflow:hidden;text-align:center;font-family:'Work Sans',sans-serif;line-height:1.4;overflow:hidden;width:100%}.Pelajar,html,body{height:100vh}@keyframes charge{from{transform:translateY(2rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes wave{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.Pelajar__content{color:#fff;font-weight:300;padding:0 2rem}.Pelajar__content,.Pelajar__footer{width:100%;position:relative;z-index:100}.Pelajar,.Pelajar__content,.Pelajar__footer{display:flex;align-items:center;justify-content:center}.Pelajar,.Pelajar__content{flex-direction:column}.Pelajar__footer{flex-wrap:wrap;max-width:600px;opacity:0;animation:charge .5s .5s forwards}.Pelajar__subtitle,.Pelajar__title{margin:0}.Pelajar__footer a{font-size:20px;color:#fff;padding:14px;background-color:rgba(0,0,0,.5);margin:2px;border-radius:3px;width:51px;transition:background .3s}.Pelajar__footer a:active,.Pelajar__footer a:focus,.Pelajar__footer a:hover{text-decoration:none}.Pelajar__footer a:hover{background-color:rgba(0,0,0,.9)}.Pelajar__subtitle,.Pelajar__text,.Pelajar__title{backface-visibility:hidden}.Pelajar__title{font-size:2.4rem;font-weight:300;opacity:0;animation:charge .5s forwards}.Pelajar__text{max-width:50rem;font-weight:300;padding:2rem 0;font-size:1.3rem;color:rgba(255,255,255,.8);opacity:0;animation:charge .5s .3s forwards}@media (min-width:768px){html{font-size:14px}.Pelajar__title{font-size:3.4rem}.Pelajar__text{font-size:1.5rem}}.wave{opacity:.6;position:absolute;bottom:40%;left:50%;width:6000px;height:6000px;background:#000;margin-left:-3000px;transform-origin:50% 48%;border-radius:46%;animation:wave 12s infinite linear;pointer-events:none}.wave2{animation:wave 28s infinite linear;opacity:.3}.wave3{animation:wave 20s infinite linear;opacity:.1}.wave{background:#000}.Pelajar{background-color:#73e8ff}.ripple{background-position:center;transition:background 0.8s}.ripple:hover{background:#37474F radial-gradient(circle,transparent 1%,#263238 1%) center/15000%}.ripple:active{background-color:#37474F;background-size:100%;transition:background 0s}a.tombol{width:30%;border:none;border-radius:2px;padding:12px 18px;font-size:16px;text-transform:uppercase;cursor:pointer;color:white;background-color:#333;box-shadow:0 0 4px #999;outline:none}</style>
    • Jika sudah Save Tema.

Sekian Tutorial ini kami buat jika masih ada kesulitan dalam mengikuti tutorial, silahkan bertanya pada kolom komentar dan jangan lupa untuk share tutorial ini ke teman-teman kamu yaa Sob!


Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel