Make a custom 404 page for Blogger

Several days ago ,Blogger team announced new SEO functions for Blogger after a long time waiting :D These functions are grouped in Meta Tags, Errors and Redirections, and Crawlers and Indexing.In Redirections group,we got 404 page function and redirect dead links .
Now in this post ,I will show you how to create a custom 404 page for all Blogger templates and Simplex's templates .

Here are steps for making this 404 page

1, Read this step if you are using one of Simplex's templates .
If you apply all instructions in internet for creating a custom 404 page for Simplex templates,you will see nothing appear.
To fix this ,make a search for this line

<b:includable id='main' var='top'>

The search result will look like this

<b:includable id='main' var='top'>
..........code here .blah blah blah......
</b:includable>

Add this code right after the line we search

<b:if cond='data:blog.pageType == "error_page"'>

<b:include data='top' name='status-message'/>

</b:if>

We make the code look like this

 <b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == "error_page"'>
                          <b:include data='top' name='status-message'/>
                     </b:if>
..........code here .......
                             </b:includable>

What does this code mean ? it means if the page is not found , Blogger will call the includables status-message (<b:includable id='status-message'> ) which showing error message ( for more information on includables ,what are they and what they do ? you can read this post )

Keep reading if you are using SimplexEnews template. Skip for other Simplex's templates

Because the includables for showing 404 message ( <b:includable id='status-message'> ) were changed for making breadcrumb bar ( this feature is only on Enews template ^^ ) so we need to fix this includable for showing both of breadcrumb bar and 404 error message .

Find this code

<b:includable id='status-message'>
                                 <b:if cond='data:navMessage'>
                                     <div id='breakcrumb' style='display:none'>
                                         <data:navMessage/>
                                     </div>                                       
                                 </b:if>
                             </b:includable>

And change it to

<b:includable id='status-message'>
                                 <b:if cond='data:navMessage'>
                                     <div id='breakcrumb' style='display:none'>
                                         <data:navMessage/>
                                     </div>                                       
                                     <b:if cond='data:blog.pageType == "error_page"'>
                          <div class='status-msg-wrap'>
                                      <div class='status-msg-body'>
                                         <data:navMessage/>
                                     </div>
                                     <div class='status-msg-border'>
                                          <div class='status-msg-bg'>
                                              <div class='status-msg-hidden'><data:navMessage/></div>
                                         </div>
                                     </div>
                                 </div>
                                 <div style='clear: both;'/>
                     </b:if>
                                 </b:if>
                             </b:includable>

2, Now this step is for you all :D both of Simplex's templates and other templates
Go to Blogger Dashboard - > Search Preferences -> Custom Page not found -> click on Edit and add the content for your custom 404 page to the text box . You can add HTML code to this box so feel free to add anything you want ,for example : a cool picture ,a search box ,or a link ...
Here is what I did for SimplexDesign : A picture for 404 message and a small text ask the readers if they can back to homepage and search again .



If you want to make a 404 page with a picture ,the content of page can be something like this        

<img src="link to your 404 picture">
Page not found ,back to Homepage

A 404 page with a search box ,the content of page can be something like this

<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>

3,After two steps above ,you can type  a wrong URL in your blog and see what is displayed .
Do you see your custom error message ?Does it has a gray background and a black border ?
Yes ,we can add more CSS to make the border and gray background disappear
Find the tag </head>

And add this code right before

<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>

Now go back and see what happen to your 404 page . Is this what you want ?

You can custom the 404 page as you want by adding your own CSS in step 3 or add your own HTML in step 2 .

That's all for a custom 404 page .Please do backup before making any change . If you are using a Simplex template ,please pay attention to step 1 and finish it before move to step 2 and 3 .