Create 404 Error Page in Blogger - Use CSS3

</font> <font color='#666666'>

Looks like you either clicked a broken link or a Page that no more exits. Kindly do one of the followings:

</font></strong></p>

  <ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>

    <li>Report the Problem to us by <a href='http://contact.mybloggertricks.com'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>

    <li>Go To Homepage by <a href='http://www.mybloggertricks.com'>Clicking Here</a>

      <br/></li>
  </ol>

  <p>
    <br/>

    <br/>

    <br/></p>

  <p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>

  <p>&#160;</p>

  <p align='center'/>

  <p align='center'><font size='5'>Page Not Found!</font></p>
</div>

 

 

         Make these customizations:

• You can edit the bolded texts with anything you like
• Replace http://contact.mybloggertricks.com with link of your contact page
• Replace http://www.mybloggertricks.com with your homepage link

   4.   Click the Save changes  button and you are half way done.

    5.  Now go to Template > Edit HTML

   6.   Search for this ]]></b:skin>

    7.  Just below it paste the following code stylsheet code:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<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;
}

.MBT-404-box {
  background:#FFFFFF;
  width:98%;
  margin:10px 0px;
  padding:20px 10px;
  border:1px solid #ddd;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  box-shadow: 5px 5px 5px #CCCCCC;
}
</style>
</b:if>

     To change the background colour of the box edit #FFFFFF

    8.   Save your template

    9.   Done!

Visit any page of your blog that do not exist to see it working just perfectly. You may type anything after your blog address to see the 404 error appearing. For example like:

http://yourblog.blogspot.com/blablabla

or

http://yourblog.blogspot.com/xyz

or

http://yourblog.blogspot.com/anything-here

etc....

What's next?

I am working on some exciting new designs for the 404 error page display and will share latest 404 templates soon.  Do let me know if you got into some trouble. Make the best out of blogger. Peace pals! :)

Source: http://www.mybloggertricks.com/2012/03/create-404-error-page-in-blogger-use.html