Customize or Modify 404 Error Page in Blogger

Socialize It

Tweet

If you are new to blogger then you may have a question that What is 404 Error Page on blogger? Well the answer is whenever someone comes up looking for some page or content on your blogger website and its not there or missing then blogger redirects the visitor to default 404 error page which shows default error message or page missing message.
If you already know what 404 Error Page on blogger is  then you might want to modify or customize it. In this post i am going to explain it in very easy steps to customize or modify Blogger 404 Error page.

LIVE DEMO

Default error message looks like this

You can change the default message and to customize it you must go to Settings > Search preferences > Custom Page not Found

<div class='BBT-404-box'>
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
You kidding me? </br>
</font> <font color='#666666'>
Looks like you clicked a broken link or a Page that no more exits. </br>Now all you can do is
</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://bestblogtrickz.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.bestblogrtrickz.blogspot.com'>Clicking Here</a>
      <br/></li>
  </ol>
  <p>
          <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>

Replace http://www.bestblogrtrickz.blogspot.com with your URL

Click Save Changes
Last thing you need to do is add CSS code to template to make it look more beautiful and blend with your template.
Go to Template > Edit HTML
Search for this ]]></b:skin>
Paste the following code just belowe 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;
}
.BBT-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>

Now you can Save your template and can see the customized error page on blogger
If you have any query or confusion about the above tutorial you are more than welcome to ask and i would love to answer.