Designing 404 (Page not found) error page for Blogger

Google's Blogger is one of the most popular blogging platforms as it is free and it is Google's own property. Most of the new blogger use blogger's default templates as they are very charming to look at and it is easily customizable without knowing to much programming knowledge.  But in some cases this is not user friendly and SEO friendly also. Suppose you wrote a post in your blogger site a few days ago that was already indexed by search engine. Now you have already removed your post for a certain reason. What will happen. Some visitors will follow your indexed link through search engine. They will see the following page as it is no more exist. This is not seo friendly and user friendly also. Visitor will see the page and go away being upset.

How it would be! if I display our own stylish page not found message instead of blogger's default one. Yes today I will do that so that visitors do not go away from your site being upset. Rather they get some clues to solve his problems. We will display the following page instead above!

  

So let's start the process. To do this you have to open up Blogger's draft page. Just follow the steps.

1. Write  https://draft.blogger.com  on you browser's address bar.
2. Now go to  Settings > Search Preferences
3. You will see Edit option at the right of this line : Custom Page Not Found   now click on Edit option.
   
4. Paste the following code inside the box (Please edit the first red colored part. Replace this part with your contace us page or your profile page. Replace second red colored line with your Blog's home page. You can write any message instead Page Not Found at last..

 

<!-- MBT Default Template -->
<div class='MBT-404-box'>
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
We are extremly sorry!
</font> <font color='#666666'>
Looks like you have either clicked a broken link or the Web Page that no more exits. Kindly choose one of the following options:
</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://www.infotechlife.com/p/blog-page_8111.html'>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.infotechlife.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>

• Click the Save Changes button and you are half way done. 
• Now go to Template > Edit HTML Search for this ]]></b:skin> (click inside HTML editor and Press Ctrl+F. Write ]]></b:skin> in it and hit enter button.)
• Just below it paste the following code stylsheet code:

/* 404 error message found not javascript code start */
<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; /* Change the color code to change the background */
  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>
/* 404 error message found not javascript code end */

Done! you have successfully added 'Page Not Found' message in your Blogges site. Follow any one step to check it.

Go to you web master tools select your site and then go Crawl Error you will see some broken links. Click any one of the links that bring you to your certain web page link and you will see the Page Not Found image.

Or you can open any of your posts from your site. and then Revert that post to draft from your blogger dashboard from selecting Posts option. After that click on Edit option. Then click on Revert to draft. At last refresh the page link that you opened. You will see the above 'Page Not Found' message.