My Blogger Hack: Add Stylish 404 Error Pages To Blogger/Blog

had given you small introduction about "Custom 404 Error Page" in my last post and in this post i give stylish 2 designs for 404 Error Not Found Page. Actually This Page Designed by Paul Santosh making just a few small changes.Check out the screenshot below.

Style 1

Go to blogger.com > Settings > Search Preferences and now click Edit for the setting Custom Page Not Found and then paste the below code

<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

Go to blogger.com > Settings > Search Preferences and now click Edit for the setting Custom Page Not Found and then paste the below code

<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/AVvXsEjq3gcwrhHbIMqmvWBwrtCW0ZARhXihLf3OuqdtyIdeYKs4cg7RwmfZJiWeJ7sP3BDf2RcCUl8UKDm8i_qKynML3WPPRxkHfvf42KcJq-rJvhsrAuRCxbjErU1uqbGrXwq4SbxiIMmoRi3f/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>