Cara Membuat Halaman Error Page 404 » Browsing merupakan kegiatan pengguna internet untuk mendapat konten menyerupai yang mereka inginkan, Kegiatas browsing ini hampir dilakukan oleh semua pengguna di seluruh dunia termasuk indonesia. Seperti yang sudah kita ketahui internet yakni ladang gosip dan hiburan yang mempunyai update paling cepat. Maka tidak heran jikalau banyak orang yang menghasbiskan waktunya hanya untuk berselancar didunia maya.
Namun terkadang kita sering menemukan halaman error 404 ketika membuka suatu halaman di internet, Halaman Error Page 404 yakni halaman yang yang sudah tidak berfungsi, entah alasannya 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 eksklusif kau juga memperbaiki seo blog kamu. Karena membuat Halaman Error Termasuk salah satu evaluasi perhiasan mesin pencari terhadap sebuah Website/blog. Ibaratnya, ini sebagai kode pada pengunjung, bahwa ada kesalahan yang terjadi. Bisa kesalahan itu alasannya mereka sendiri alasannya salah ketik alamat, atau alasannya si admin blog yang salah dalam menciptakan sebuah link.
Oke saya rasa sudah tak perlu banyak basa busuk lagi, eksklusif 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 sajian Tema/Template, dan klik Edit HTML.
Langkah 3: Kemudian cara code </b:skin> dan letakan kode dibawah ini sempurna setelah 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 kau di www.namadomain.com/wp-admin.
Langkah 2: Kemudian pilih sajian 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 kau ingin mendapat panduan ngeblog dari lapaklama.com secara gratis, silahkan daftarkan email kau pada kolom berlangganan dibawah ini.
Sumber aciknadzirah.blogspot.com