Making a 404 Error Custom Page Not Found Trick

Design 404 Error Page For

English: 404 Error Symbol Deutsch: 404 Fehler Symbol (Photo credit: Wikipedia)

Blogger

The 404 page will prompt visitors that he has landed a page not found and will provide him three important options which are:

• Go Back to the page from where he came from. We will use JavaScript here.
• Contact the Admin and inform him about the broken link. This will help you track broken links
• And finally to provide a link to homepage.

Lets get to work to achieve all the above. Simply follow the easy steps below to display 404 error message uniquely.

1. Go To draft.blogger.com > Settings > Search Preferences
2. Click on Edit link next to : Custom Page Not Found
3. Inside the box paste the following code: 

---------------------------------------------------------------------------------------------------------------

<!-- MBT Default Template -->
<div class='MBT-404-box'>
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</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.tricksblogspot.blogspot.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.tricksblogspot.blogspot.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.tricksblogspot.blogspot.com with link of your contact page
• Replace http://www.tricksblogspot.blogspot.com with your homepage link

   4.   Click the Save changes  button and you are half way done.
    5.  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 color of the box edit #FFFFFF
    8.   Save your template
    9.   Done!

Related articles

• Handling error pages