Gue rasa nih banyak temen temen blogger yang masih belum tau tutorial ini. Nah makanya sekarang gue akan kasih tau caranya. Sebelum gue kasih tau biar gue kasih penjelasannya sedikit Ok.!. Halaman Error dengan style ini sebenernya di rancang oleh Paul Santosh membuat hanya changes.Check kecil keluar gambar di bawah. Yang akan gue kasih tau ini gue bedakan menjadi 2 style.


Style 1

 
 Caranya. Pergi ke blogger >> Preferensi Pencarian Pengaturan >> klik Edit untuk Page pengaturan Kustom Tidak Ditemukan >> paste di bawah kode

 <h1><a href='/'>404 Not Found</a></h1>
<h2>Whoops! It appears you hit a bad link. My bad! Please click the back arrow on your browser to return to the previous page or <a href='/'>click here to go to homepage</a></h2>
<style type='text/css'>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
* { margin, padding: 0; }
body {
 background: #474747 url(bg.png);
 margin: 70px;
}
h1 a {
 display: block; text-decoration: none;
 font: 150px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
 text-align: center;
 color: #999; text-shadow: 0px 3px 8px #2a2a2a;
 }
  h1 a:hover {
   color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
  }

h2 {
 font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
 text-align: center;

 color: #222; text-shadow: 0px 2px 3px #555;
}
#sidebar-wrapper, #blog-pager, #header, #footer, nav, .blog-feeds {
    display: none;
    }
</style>

Style 2


 Caranya sama dengan yang tadi. Pergi ke blogger >> Preferensi Pencarian Pengaturan >> klik Edit untuk Page pengaturan Kustom Tidak Ditemukan >> paste di bawah kode

<h1>404 - Page not found!</h1>
<h2>You are looking for the Page isn't here.</h2>
<h3>let's try our site search</h3><BR><BR>
<div id="md-searchbox">
<form id="md-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /></form></div>
<style type='text/css'>
#md-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyh4QNRcqJibXBr1TNrjG1Y2cK1Lf4m7Tzat3OIY8ex6yaQ8ObA9hkZxA-8wSdlEsFBYa0zLfKR7mokdkXVuO-3Q_i18PV3B1ut2ErvkRzCtxYvLxXLvC2Db39jB4zLhcHpigBYAVxpoiq/s1600/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#md-searchform{display: block;padding: 10px 12px;margin:0;}
form#md-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#md-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
* { margin: 0; padding: 0; }
    body { background: #666; margin: 70px; }
    h1,h2,h3,h4 { margin: 0 0 3px 0; }
        h1 { color: #FFF; font: bold 52px Helvetica, Arial, Sans-Serif;
           text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
           -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
        }
        h1:hover {
           position: relative; top: -3px; left: -3px;
           text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
        }
       h2 { color: white; font: bold 34px Helvetica, Arial, Sans-Serif;
        text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe;
        -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
       }
       h2:hover {
           text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe, 4px 4px #02a2fe, 5px 5px #02a2fe, 6px 6px #02a2fe;
       }
    h3 { color: white; font: bold 42px Helvetica, Arial, Sans-Serif;
        text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
        -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
       }
       h3:hover {
           position: relative; top: -3px; left: -3px;
           text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
       }
       h4 { color: white; font: bold 24px Helvetica, Arial, Sans-Serif;
        text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe;
        -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
       }
       h4:hover {
           text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe, 4px 4px #02a2fe, 5px 5px #02a2fe, 6px 6px #02a2fe;
       }
    #content { width: 100%; }
#sidebar-wrapper, #blog-pager, #header, #footer, nav, .blog-feeds {
    display: none;
    }
</style>

Terakhir Disimpan.