Setting Up A 404 Error Page For Blogger Blog

In this tutorial i will teach you to enable andcustomize 404 Error page for your blogger blog. A 404 Error occurs when you try to visit  a page that does not exist or has been deleted. Adding a 404 error page will let your visitors go back to previous page or Home page and will. This will allow to keep visitors engage on your blog for little longer and decrease bounce rate. The default blogger 404 page is boring and unattractive so we will be styling it using some Html and CSS to make it look more stylish. So lets add and style 404 Error page to your blog. check out live demo of 404 error page by clicking on button given below.

Live Demo

Creating 404 Error Page 

1. Go to blogger Dashboard then Settings > Search Preferences

2. Now under Error and Redirection click on Edit beside custom page not found.

3. Inside the box paste code given below.

<!-- MBW 404 Page -->
<div class='MBW-404-box'>
  <p style='line-height: 1.6em'><strong>
<font color='red' size='6'>
Oops!!!
</font> <font color='#666666'>
 <!-- mybloggersworld.com -->
Looks like you are trying to access page that does not exist or has been deleted. Please do any 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 By <a href='http://www.mybloggersworld.com'>Clicking Here</a>&#160;&#160;&#160; (<i>This will help us serve you better</i>) </li>
    <li>Go To Homepage by <a href='http://www.mybloggersworld.com/contact'>Clicking Here</a>
      <br/></li>
  </ol>
  <p><br><br></p><p align='center'><font color='#159b24' style='font-size: 135px'><strong>404</strong></font></p>
  <p align='center'><font size='5'>Error Page Not Found</font></p>
</div>

4. Now make following changes to above code.

• Change www.mybloggersworld.blogspot.com to your blog address
• Change http://www.mybloggersworld.blogspot.com/contact to your contact page
• Replace #159b24 to change color of 404 text.

5. Then save the changes.

6. Now from blogger dashboard click on Template > Edit Html

7. Seach for ]]></b:skin> and paste the code give below just below it.

<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;
}
.MBW-404-box {
  background:#FFFFFF;
  width:96%;
  margin:10px 0px;
  padding:15px 15px;
  border:1px solid #b9b6b6;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  box-shadow: 6px 6px 6px #e3e3e3;
}
</style>
</b:if>

8. Make following changes to customize 404 Error page

• Replace #FFFFFF to change background color.
• Replace #b9b6b6 to change border color.

9. Save the template and done.

How to check if its Working ?

In order to check if you implemented 404 error page properly on your blog and is working correctly visit link given below.

• htttp://www.yourblogurl.com/somecrap  (Replace yourblogurl with your blog address)