Cara Membuat 404 Site Not Found yang Keren

Kemarin ada yang chat saya, katanya sih dia mau Site 404 Not Foundnya seperti saya, oke dah kalau begitu, saya akan share di mari caranya.. Jika sobat blom tau seperti apa tampilan silahkan di mari Demonya

DEMO

oke bagaimana sob tampilannya keren kan? yaudah bagi yang berminat ingin seperti itu silahkan ikuti langkah langkah berikut ini....

1. Seperti biasa login blog
2. Template - > Edit HTML dan centang expand Template Widget
3. Cari Kode </body>
4. Setelah Ketemu Masukan Kode Berikut ini di atas Kode Tersebut

<!-- Start--> 
 <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
#error-not-found {
background: #00ff00;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLLnsNkii2ek2MOnGAjFTdm2iB3duO1D-99-lh5p3WuKJP94oDzCTrLrRWOtJHEehCQ5_JzE3T5GuyBEhmakYypWAaS7IlGMBtgaYI4kRQ5UsegHQCfzpiIWQ0XFj5eJi6GNLQHjsR_5o/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #00FF00 0%, #000000 100%);
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLLnsNkii2ek2MOnGAjFTdm2iB3duO1D-99-lh5p3WuKJP94oDzCTrLrRWOtJHEehCQ5_JzE3T5GuyBEhmakYypWAaS7IlGMBtgaYI4kRQ5UsegHQCfzpiIWQ0XFj5eJi6GNLQHjsR_5o/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#00FF00), to(#000000) );
text-align:center;
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
padding-top:270px;
z-index:999999;
}
#error-not-found  h1 {
font-size:610px!important;
position:absolute;
top:-50px; left:500px;
font-family:impact,sans serif!important;
letter-spacing: -8px;
margin-left:-502px!important;
width:960px;
z-index:-2;
color:rgba(0,0,0,.09)!important;
}
#error-not-found  h2 {
font-family:arial black,sans serif!important;
text-transform:uppercase;
font-size:81px;
line-height:66px!important;
letter-spacing: -3px;
color:#fff!important;
text-shadow:1px 0 0 lime,-1px 0 0 lime,0 1px 0 lime,0 -1px 0 lime,1px 1px 2px lime;
margin:0!important;
padding:0!important;
}
#error-not-found p a,
#error-not-found p a:visited,
#error-not-found p a:hover{
font-family:arial black,sans serif!important;
text-transform:uppercase;
font-size:56px;
line-height:40px!important;
border:none;
font-weight: bold;
color:rgba(0,0,0,.5)!important;
margin:0!important;
padding:0!important;
text-decoration:none!important;
}
</style>
<div id='error-not-found'>
 <h1>404</h1> <h2>Error 404</h2>
 <h2>Page Not Found</h2>
 <p> <a href='http://erikofujiwara.blogspot.com' title='home page'> Back Home page</a></p>
            </div>
</b:if>                <!-- end-->

5. Setelah Itu Save Template

Selesai...!! Semoga Bermanfaat ^_^