https://www.lk21.news/2018/02/cara-membuat-halaman-error-page-404.html
/* Page 404 Error by Lk21.news */
@import url(https://fonts.googleapis.com/css?family=opensans:500);body{background:#75d9f9;color:#fff;font-family:'Open Sans',sans-serif;max-height:700px}.cloud{width:350px;height:120px;background:#fff;background:linear-gradient(top,#fff 100%);background:-webkit-linear-gradient(top,#fff 100%);background:-moz-linear-gradient(top,#fff 100%);background:-ms-linear-gradient(top,#fff 100%);background:-o-linear-gradient(top,#fff 100%);border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px;position:absolute;margin:120px auto 20px;z-index:-1;transition:ease 1s}.cloud:after,.cloud:before{content:'';position:absolute;background:#fff;z-index:-1}.cloud:after{width:100px;height:100px;top:-50px;left:50px;border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px}.cloud:before{width:180px;height:180px;top:-90px;right:50px;border-radius:200px;-webkit-border-radius:200px;-moz-border-radius:200px}.x1{top:-50px;left:100px;-webkit-transform:scale(.3);-moz-transform:scale(.3);transform:scale(.3);opacity:.9;-webkit-animation:moveclouds 15s linear infinite;-moz-animation:moveclouds 15s linear infinite;-o-animation:moveclouds 15s linear infinite}.x1_5{top:-80px;left:250px;-webkit-transform:scale(.3);-moz-transform:scale(.3);transform:scale(.3);-webkit-animation:moveclouds 17s linear infinite;-moz-animation:moveclouds 17s linear infinite;-o-animation:moveclouds 17s linear infinite}.x2{left:250px;top:30px;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);opacity:.6;-webkit-animation:moveclouds 25s linear infinite;-moz-animation:moveclouds 25s linear infinite;-o-animation:moveclouds 25s linear infinite}.x3{left:250px;bottom:-70px;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);opacity:.8;-webkit-animation:moveclouds 25s linear infinite;-moz-animation:moveclouds 25s linear infinite;-o-animation:moveclouds 25s linear infinite}.x4{left:470px;botttom:20px;-webkit-transform:scale(.75);-moz-transform:scale(.75);transform:scale(.75);opacity:.75;-webkit-animation:moveclouds 18s linear infinite;-moz-animation:moveclouds 18s linear infinite;-o-animation:moveclouds 18s linear infinite}.x5{left:200px;top:300px;-webkit-transform:scale(.5);-moz-transform:scale(.5);transform:scale(.5);opacity:.8;-webkit-animation:moveclouds 20s linear infinite;-moz-animation:moveclouds 20s linear infinite;-o-animation:moveclouds 20s linear infinite}@-webkit-keyframes moveclouds{0%{margin-left:1000px}100%{margin-left:-1000px}}@-moz-keyframes moveclouds{0%{margin-left:1000px}100%{margin-left:-1000px}}@-o-keyframes moveclouds{0%{margin-left:1000px}100%{margin-left:-1000px}}h2{font-size:50px;text-align:center;margin:12px 0 0 0;text-transform:uppercase;line-height:40px;}h3{margin:40px 0 8px;text-align:center;font-size:30px;font-weight:500;line-height:1.4;text-shadow:#627267}#buttonerror{clear:both;position:absolute;background-color:rgba(255,255,255,.05);color:#ec7e65;position:absolute;left:0;right:0;bottom:9%;margin:auto;max-width:400px;padding:20px;z-index:99999;border-radius:10px;border:5px solid #fff;transition:all .5s}#buttonerror a{color:#fff;font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:1px}#buttonerror:hover{background-color:rgba(255,255,255,1)}#buttonerror a:hover,#buttonerror:hover a{color:#ec7e65}.error-container{text-align:center;font-size:180px;font-family:Catamaran,sans-serif;font-weight:800;margin:20px 15px}.error-container>span{display:inline-block;line-height:.7;position:relative;color:#ffb485}.error-container>span{display:inline-block;position:relative;vertical-align:middle}.error-container>span:nth-of-type(1){color:#d1f2a5;animation:colordancing 4s infinite}.error-container>span:nth-of-type(3){color:#f56991;animation:colordancing2 4s infinite}.error-container>span:nth-of-type(2){width:120px;height:120px;border-radius:999px}.error-container>span:nth-of-type(2):after,.error-container>span:nth-of-type(2):before{border-radius:0;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;border-radius:999px;box-shadow:inset 30px 0 0 rgba(209,242,165,.4),inset 0 30px 0 rgba(239,250,180,.4),inset -30px 0 0 rgba(255,196,140,.4),inset 0 -30px 0 rgba(245,105,145,.4);animation:shadowsdancing 4s infinite}.error-container>span:nth-of-type(2):before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}.screen-reader-text{position:absolute;top:-9999em;left:-9999em}@keyframes shadowsdancing{0%{box-shadow:inset 30px 0 0 rgba(209,242,165,.4),inset 0 30px 0 rgba(239,250,180,.4),inset -30px 0 0 rgba(255,196,140,.4),inset 0 -30px 0 rgba(245,105,145,.4)}25%{box-shadow:inset 30px 0 0 rgba(245,105,145,.4),inset 0 30px 0 rgba(209,242,165,.4),inset -30px 0 0 rgba(239,250,180,.4),inset 0 -30px 0 rgba(255,196,140,.4)}50%{box-shadow:inset 30px 0 0 rgba(255,196,140,.4),inset 0 30px 0 rgba(245,105,145,.4),inset -30px 0 0 rgba(209,242,165,.4),inset 0 -30px 0 rgba(239,250,180,.4)}75%{box-shadow:inset 30px 0 0 rgba(239,250,180,.4),inset 0 30px 0 rgba(255,196,140,.4),inset -30px 0 0 rgba(245,105,145,.4),inset 0 -30px 0 rgba(209,242,165,.4)}100%{box-shadow:inset 30px 0 0 rgba(209,242,165,.4),inset 0 30px 0 rgba(239,250,180,.4),inset -30px 0 0 rgba(255,196,140,.4),inset 0 -30px 0 rgba(245,105,145,.4)}}@keyframes colordancing{0%{color:#d1f2a5}25%{color:#f56991}50%{color:#ffc48c}75%{color:#effab4}100%{color:#d1f2a5}}@keyframes colordancing2{0%{color:#ffc48c}25%{color:#effab4}50%{color:#d1f2a5}75%{color:#f56991}100%{color:#ffc48c}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}6. Setelah itu Copy Kode berikut ini dan Paste dibawah Kode <body>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='clouds'>
<div class='cloud x1'/>
<div class='cloud x1_5'/>
<div class='cloud x2'/>
<div class='cloud x3'/>
<div class='cloud x4'/>
<div class='cloud x5'/>
</div>
<section class='error-container'>
<span>4</span>
<span><span class='screen-reader-text'>0</span></span>
<span>4</span>
</section>
<h2>Laman Tidak di Temukan</h2>
<h3 class='quote'>"Kami mohon maaf atas ketidaknyamanan ini"</h3>
<div style='font-size:10em; color:#049372'>
<center> <i class='fa fa-eye-slash float shadow'/></center>
</div>
<div id='buttonerror'>
<a expr:href='data:blog.homepageUrl'>Back To Homepage</a></div>
</b:if> Silahkan Anda ganti kata yang tindai warna kuning dengan kata yang Anda inginkan, dan silahkan kreasikan sesuai selera Anda.
