Custom 404 Error Pages for Blogger

Instructions

1. Login to your Blogger account and go to the Template page and proceed to Edit HTML
2. Click on the Expand Widget Templates Check box so that your entire template comes up
3. Now Look for </head> and immediately before that paste this snippet

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

   This code snippet will reset the default styling given to the Blogger Message Wrapper.
4. Save the template and go to a page on your blog which doesn’t exist.
5. You should be able to see the change now. The grey background and the border around the 404 status message would no longer be there.
6. Now Let’s see how we can improve the look and feel of our 404 page. I would suggest you to use inline CSS styles to improve the look and Feel of your 404 message.Here is a sample HTML template which you can paste into the text box at Search preferences > Custom Page not Found.

   <h3>Your requested page was not found</h3>
   <p>Sorry, we cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.<br/>
   Please check that the Web site address is spelled correctly.</p>
   <b>Other things to try:</b><br/>
   <ul>
   <li>Go to our <a href="/">home page</a>, and use the menus or links to navigate to a specific post.</li>
   <li>
   <form method="get" action="/search">
   <table width="100%">
   <tr>
   <td><input type="text" style="width:95%;padding:2px;" value="Search this blog.." onfocus="if (this.value == &quot;Search this blog..&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" name="q"></td>
   <td><input type="button" Value="Search"></td>
   </tr>
   </table>
   </form>
   </li>
   </ul>

7. It will give you something similar to my 404 page.
8. If you are creative, you can add more stuff to the 404 pages. You can find a list of really creative 404 pages on HongKiat for inspiration

Detecting an Error Page

<b:if cond='data:blog.pageType == "error_page"'>
This is an Error Page
</b:if>

Changing the Error Page Title

<title><data:blog.pageTitle/></title>

<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

<!-- Start www.bloggerplugins.org: Changing the Blogger Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
<!-- End www.bloggerplugins.org: Changing the Blogger Title Tag –>

<!-- Start www.bloggingsofts.blogspot.com: Changing the Blogger Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
</b:if>
<!-- End www.bloggingsofts.blogspot.com: Changing the Blogger Title Tag –>