Create Animasi Custom Error 404 file Not Found Page

Posted by : Yasraf Desember 27, 2012

Untuk hari ini Aneakan share cara membuat Error 404 file Not Found Page dengan animasi. untuk demonya silahkan anda klik disini

Berikut Tutorialnya :

Login ke blogger
Pilih menu template >> edit HTML >> lanjutkan
Dengan menggunakan ctrl + F, cari kode </body>
Lalu letakkan kode berikut diatasnya

<b:if cond='data:blog.pageType == "error_page"'>
<style>
/* CSS reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
html,body{margin:0;padding:0;overflow:hidden;}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
#error-not-found{background:#310404 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5pm51soFyOga4JPL3QdsPpSCG3pr4NIYNWqukoTMN8XTemBDC7VXMsNpSyLZ49XBPOc-wFZ-uQXyXdMNQtyB_1GTI9b4YchzKDjhurvqkkTjCPddNGZX5vyX9xZe9bDtV8GoCoMDwz0s/s1600/overlay.png) repeat;font-family:'BebasNeueRegular';z-index:999999;position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:999999;overflow:hidden;}
.eror-page{background:-webkit-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:-moz-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:-ms-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));position:absolute;width:100%;height:100%;left:0px;top:0px;z-index:1000}
#error-not-found h2{position:absolute;top:50%;line-height:100px;height:100px;margin-top:-50px;font-size:100px;width:100%;text-align:center;color:transparent;-webkit-animation:blurFadeInOut 3s ease-in backwards;-moz-animation:blurFadeInOut 3s ease-in backwards;-ms-animation:blurFadeInOut 3s ease-in backwards;animation:blurFadeInOut 3s ease-in backwards}
#error-not-found h2.frame-1{-webkit-animation-delay:0s;-moz-animation-delay:0s;-ms-animation-delay:0s;animation-delay:0s}
#error-not-found h2.frame-2{-webkit-animation-delay:3s;-moz-animation-delay:3s;-ms-animation-delay:3s;animation-delay:3s}
#error-not-found h2.frame-3{-webkit-animation-delay:6s;-moz-animation-delay:6s;-ms-animation-delay:6s;animation-delay:6s}
#error-not-found h2.frame-4{font-size:200px;-webkit-animation-delay:9s;-moz-animation-delay:9s;-ms-animation-delay:9s;animation-delay:9s}
#error-not-found h2.frame-5{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;color:transparent;text-shadow:0px 0px 1px #fff}
#error-not-found h2.frame-5 span{-webkit-animation:blurFadeIn 3s ease-in 12s backwards;-moz-animation:blurFadeIn 1s ease-in 12s backwards;-ms-animation:blurFadeIn 3s ease-in 12s backwards;animation:blurFadeIn 3s ease-in 12s backwards;color:transparent;text-shadow:0px 0px 1px #fff}
#error-not-found h2.frame-5 span:nth-child(2){-webkit-animation-delay:13s;-moz-animation-delay:13s;-ms-animation-delay:13s;animation-delay:13s}
#error-not-found h2.frame-5 span:nth-child(3){-webkit-animation-delay:14s;-moz-animation-delay:14s;-ms-animation-delay:14s;animation-delay:14s}
.sp-backg{position:absolute;width:470px;height:239px;left:50%;top:50%;margin:-137px 0 0 -141px;background:transparent url(http://www.naturalhealthencyclopedia.com/skin/img/404.png) no-repeat top left;-webkit-animation:fadeInBack 3.6s linear 14s backwards;-moz-animation:fadeInBack 3.6s linear 14s backwards;-ms-animation:fadeInBack 3.6s linear 14s backwards;animation:fadeInBack 3.6s linear 14s backwards;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter:alpha(opacity=30);opacity:0.3;-webkit-transform:scale(2);-moz-transform:scale(2);transform:scale(2)}
.sp-circle-link{position:absolute;left:50%;bottom:5%;margin-left:-50px;text-align:center;line-height:100px;width:100px;height:100px;background:#fff;color:#3f1616;font-size:25px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-animation:fadeInRotate 1s linear 16s backwards;-moz-animation:fadeInRotate 1s linear 16s backwards;-ms-animation:fadeInRotate 1s linear 16s backwards;animation:fadeInRotate 1s linear 16s backwards;-webkit-transform:scale(0.8) rotate(0deg);-moz-transform:scale(0.8) rotate(0deg);transform:scale(0.8) rotate(0deg)}
.sp-circle-link:hover{background:#85373b;color:#fff}
/**/@-webkit-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;-webkit-transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;-webkit-transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;-webkit-transform:scale(0)}
}
@-webkit-keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;-webkit-transform:scale(1.3)}
50%{opacity:0.5;text-shadow:0px 0px 10px #fff;-webkit-transform:scale(1.1)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;-webkit-transform:scale(1)}
}
@-webkit-keyframes fadeInBack{0%{opacity:0;-webkit-transform:scale(0)}
50%{opacity:0.4;-webkit-transform:scale(1)}
100%{opacity:0.2;-webkit-transform:scale(2)}
}
@-webkit-keyframes fadeInRotate{0%{opacity:0;-webkit-transform:scale(0) rotate(360deg)}
100%{opacity:1;-webkit-transform:scale(1) rotate(0deg)}
}
/**/@-moz-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;-moz-transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;-moz-transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;-moz-transform:scale(0)}
}
@-moz-keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;-moz-transform:scale(1.3)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;-moz-transform:scale(1)}
}
@-moz-keyframes fadeInBack{0%{opacity:0;-moz-transform:scale(0)}
50%{opacity:0.4;-moz-transform:scale(1)}
100%{opacity:0.2;-moz-transform:scale(2)}
}
@-moz-keyframes fadeInRotate{0%{opacity:0;-moz-transform:scale(0) rotate(360deg)}
100%{opacity:1;-moz-transform:scale(1) rotate(0deg)}
}
/**/@keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;transform:scale(0)}
}
@keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;transform:scale(1.3)}
50%{opacity:0.5;text-shadow:0px 0px 10px #fff;transform:scale(1.1)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;transform:scale(1)}
}
@keyframes fadeInBack{0%{opacity:0;transform:scale(0)}
50%{opacity:0.4;transform:scale(1)}
100%{opacity:0.2;transform:scale(2)}
}
@keyframes fadeInRotate{0%{opacity:0;transform:scale(0) rotate(360deg)}
100%{opacity:1;transform:scale(1) rotate(0deg)}
}
</style>
<div class='container'>
<div id='error-not-found'>
<div class='eror-page'>
<div class='sp-backg'/>
<h2 class='frame-1'>Mohon Maaf..!!!</h2>
<h2 class='frame-2'>Halaman Yang Anda Cari Tidak Ada</h2>
<h2 class='frame-3'>Go To Homepage</h2>
<h2 class='frame-4'>Now... !!</h2>
<h2 class='frame-5'><span>Error 404.!!</span> <span>Page Not</span> <span>Found.</span></h2>
<a class='sp-circle-link' expr:href='data:blog.homepageUrl' title='Home page'>HOME</a>
</div>
</div></div> 
</b:if>

Jika ingin mengubah pesannya. kamu hanya tinggal mengganti text yg berwarna merah dengan pesan yg ingin kamu tampilkan.
Setelah itu simpan HTML kamu.

Nah sekarang coba kamu cek, apakah berhasil. jika berhasil jangan lupa untuk meninggalkan komentar. karena komentar anda sangat membantu perkembangan blog ini!!

by Adithya-putr4