Cara Membuat Halaman Error Page 404 Keren di Blog

Cara Membuat Halaman Error Page 404 Keren di Blog

Cara Membuat Halaman Error Page 404 » Browsing merupakan aktivitas pengguna internet untuk mendapatkan konten seperti yang mereka inginkan, Kegiatas browsing ini hampir dilakukan oleh semua pengguna di seluruh dunia termasuk indonesia. Seperti yang sudah kita ketahui internet adalah ladang informasi dan hiburan yang memiliki update paling cepat. Maka tidak heran jika banyak orang yang menghasbiskan waktunya hanya untuk berselancar didunia maya.Cara Membuat Halaman Error Page 404 Keren di Blog

Namun terkadang kita sering menemukan halaman error 404 saat membuka suatu halaman di internet, Halaman Error Page 404 adalah halaman yang yang sudah tidak berfungsi, entah karena permalink yang dirubah atau halaman tersebut dihapus, sehingga pengunjung akan dialihkan kehalaman error 404.

Nah pada kesempatan kali ini saya ingin membagikan kepada kalian semua Cara Membuat Halaman Error Page 404 Keren di Blog, Dengan membuah halaman error 404 maka secara tidak langsung kamu juga memperbaiki seo blog kamu. Karena 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.

Oke saya rasa sudah tak perlu banyak basa basi lagi, langsung saja simak panduan Cara Membuat Halaman Error Page 404 Keren di Blog, silahkan ikuti panduan dibawah ini.

Cara Membuat Halaman Error Page 404 Keren di Blog (Blogger)

Langkah 1: Masuk kehalaman dasboard blogger kamu, di blogger.com

Langkah 2: Kemudian pilih menu Tema/Template, dan klik Edit HTML.

Langkah 3: Kemudian cara code </b:skin> dan letakan kode dibawah ini tepat sesudah kode </b:skin> tadi. Untuk mempermudah menemukan kode gunakan kombinasi tombol CTRL+F secara bersamaan.

<b:if cond='data:blog.pageType == "error_page"'>
<!--HALAMAN ERROR BY CODEPELAJAR.COM-->
<div class='Pelajar'>
  <header class='Pelajar__content'>
    <h1 class='Pelajar__title'>ERROR 404 ( ͡◉ ͜ʖ ͡◉)</h1>
    <div class='Pelajar__text'>It seems like we couldn'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>

Langkah 4: Jika sudah memasang kode diatas, klik tombol Save Template/Simpan Template.

Cara Membuat Halaman Error Page 404 Keren di Blog (WordPress)

Langkah 1: Masuk kehalaman dasboard wordpress kamu di www.namadomain.com/wp-admin.

Langkah 2: Kemudian pilih menu Tampilan » Theme Editor > Cari file 404.php

Langkah 3: Kemudian 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 ( ͡◉ ͜ʖ ͡◉)</h1>
    <div class='Pelajar__text'>It seems like we couldn'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>

Langkah 4: Jika sudah Save/Simpan.

Live Demo Halaman Error PAge 404

Penutup

Nah itulah panduan mudah Cara Membuat Halaman Error Page 404 Keren di Blog, Jika kamu ingin mendapatkan panduan ngeblog dari lapaklama.com secara gratis, silahkan daftarkan email kamu pada kolom berlangganan dibawah ini.

Nilai Kualitas Konten

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *