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"'>We make the code look like this
<b:include data='top' name='status-message'/>
</b:if>
<b:includable id='main' var='top'>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 )
<b:if cond='data:blog.pageType == "error_page"'>
<b:include data='top' name='status-message'/>
</b:if>
..........code here .......
</b:includable>
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">A 404 page with a search box ,the content of page can be something like this
Page not found ,back to Homepage
<h3>Your requested page was not found</h3>3,After two steps above ,you can type a wrong URL in your blog and see what is displayed .
<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 == "Search this blog..") {this.value = ""}" onblur="if (this.value == "") {this.value = "Search this blog...";}" name="q"></td>
<td><input type="button" Value="Search"></td>
</tr>
</table>
</form>
</li>
</ul>
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"'>Now go back and see what happen to your 404 page . Is this what you want ?
<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>
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 .
