Create Animasi Custom Error 404 file Not Found Page


Untuk hari ini Adithya Blog akan 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 == &quot;error_page&quot;'>
<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:&#39;&#39;}
abbr,acronym{border:0}
#error-not-found{background:#310404 url(http://2.bp.blogspot.com/-8NbcCCOqN7Q/UH1Qji8YwoI/AAAAAAAABK0/fdt7VzmL1q4/s1600/overlay.png) repeat;font-family:&#39;BebasNeueRegular&#39;;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:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=30)&quot;;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> <!-- end-->
</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!!





Related Post:

29 comments

October 23, 2012 at 11:34 PM

nice bro.....
tp boleh nanya g bro?
saya mau edit peraturan komentar juga
mau tambahkan di bagian mana y?
mohon pencerahan

October 24, 2012 at 1:38 AM

di setelan >> pos dan komentar >> masukan pesan yg ingin ditampilakan di kolom Pesan Formulir Komentar >> simpan.

October 25, 2012 at 1:09 AM

wah, nice infonya,..!
kommentar back my award??

http://heric-ajha.blogspot.com/

October 25, 2012 at 1:24 AM

Wah-Nice-Sob
Visit-back
http://itsmymarkus.blogspot.com/

October 25, 2012 at 2:58 AM

ok..

October 25, 2012 at 2:58 AM

sep..

October 25, 2012 at 6:28 PM

Keren Bisa dicoba nih ...

October 25, 2012 at 6:41 PM

Wah mantep bgt neh ijin untuk di coba

October 26, 2012 at 7:52 PM

silahkan sob dicoba....

October 26, 2012 at 7:52 PM

monggo...

November 1, 2012 at 12:40 AM

saya kesini gak sia sia, karena disini artikelnya bagus.. ^_^

#Salam hangat dari Yousake NKRI

November 4, 2012 at 12:18 AM

Keren Sob ..
Bermanfaat Nih Buat Saya .

Jangan Lupa Mampir Di Blog Saya Juga ya ..

Di Sini Mas Clicknya

Thank's . Blogwalking ....

November 4, 2012 at 2:03 AM

oke..

November 4, 2012 at 2:04 AM

thanks...

November 5, 2012 at 4:08 AM

Widih manteb nih , gan tukeran link sama saya yuk . FOloow saya juag sob , nanti saya folback 4 kali :)

November 5, 2012 at 5:39 PM

ok sob, uda saya follow...

November 8, 2012 at 9:30 PM

wah keren ne, patut dicoba...

November 9, 2012 at 2:37 AM

silahkan....

November 12, 2012 at 4:59 AM

Mampir Disini Yah
Klik Disini

November 23, 2012 at 5:22 PM

ok...

January 18, 2013 at 9:41 PM

http://reader-download.googlecode.com/svn/trunk/images/emo/drummer.gif

March 6, 2013 at 7:12 PM

:D JENIUS !! thanks kk

March 6, 2013 at 10:16 PM

sama2..

May 8, 2013 at 7:32 PM

ga bsa bro...
=( =( =( =( =( =( =( =( =( =( =( =( =( =( =( =( =( =( =( =( =(

July 13, 2013 at 3:39 PM

Mas adit Numpang nanya ya :D , tau gak cara membuat gambar di header bergerak waktu di sorot cursor tulong yee :D

Makasih atas jawabanye :D

November 1, 2013 at 4:13 AM

:drummer:

November 1, 2013 at 4:14 AM

:rolled:

November 1, 2013 at 4:17 AM

^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^ ^o^

November 1, 2013 at 4:17 AM

:'( :'( \o/ \o/

Post a Comment - Back to Content

Peraturan :
• komentar Dilarang Berbau SARA
• komentar Dilarang FLODDING,SPAM Dan Lain Lain
• komentar Dilarang Berbau Link Hidup
• Gunakan URL kalian utk berkomentar