Customizing your 404 - Page Not Found

Earlier this year Blogger made it possible for its publishers to customize its "404 - Not Found" page, the page someone sees when going to non-existent address. Today we look at donating it as space for a PSA (Public Service Announcement)..

Some people choose to customize their 404 page with ads, and that’s perfectly fine. I don’t use ads, so my 404 page used to look like rather bland and utilitarian:

<h2>Sorry, the page you're looking for is not in (holiday?)</h2> <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>Use the blog search field at the top to search for articles or the one below.</li> <li>You may browse by keywords / labels / categories. You will find them in the cloud on the right.</li> <li>At the end of each article you will find a number of predefined searches or "Tags." Clicking them will display all the articles containing that word.</li> <li>If a video does not show up, it may be because YouTube has changed the embed codes for Playlists. You can still see it by clicking "yt-" link in Sources, which will take you straight to the playlist page on Youtube. <li>If you know the approximate time when the article was published, you might want to search for it in the chronological archive, accessible in sidebar under "Archives."</li> <li>Go to our <a href="/">home page</a>, and use the menus or links to navigate to a specific post.</li> <li>If you have further questions, please read the FAQ (click the menu link at the top). <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>

A service I recently learned about allows you to display an updating picture of missing children on your 404 / Not Found page:

According to tnw,

NotFound was cooked up by Brussels-based advertising agency Famous (via Lev Detrez).

Strangely, rather than having a piece of code that anyone could just copy and paste, the website requries registration. We did register and obtained the following:

<iframe height="650" src=http://notfound-static.fwebservices.be/404/index.html?&key=aa9b09a0f9fd4f44386be6ebfbf6e9b5 frameborder="0" width="100%"></iframe>

Looking at the code, it seems that the key is tied into the registration. You should probably obtain your own registration by going to the site’s process (link below, in Sources). We pasted the code above on top of our 404 page.

Just in case you want a different more personal 404 / Not Found webpage, there’s more tricks you can use. On Blogger, you may do the following:

To change the Page Title, add the following right under <head> in your template:
<b:if cond='data:blog.pageType == "error_page"'>
2
<title>You've ripped a hole in the fabric of the internet. </title>
3
</b:if>

To reset the styling, add the following to your template:

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

To provide your visitor with an option to search your blog, use
<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>
You may also use any of the following general hacks.

One nifty trick is to use one image as a page background, with the following code:

<style type="text/css" >
2
body {background:white url('imageURL') 50% 0% no-repeat !important;z-index:10000000;}
3
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
4
body {min-width: 0px !important;}
5
</style>

Replace “imageURL” with any of the following after making sure they work (hover with your mouse to read a quick description):

Note, however, that some of these may actually be subject to copyright (see the link we provided below for inspiration).

Finally, you might want to use Google missing page search code, which will populate the search field with the keywords that led to the missing page:

<script type="text/javascript">
var GOOG_FIXURL_LANG = 'en-GB';
var GOOG_FIXURL_SITE = 'http://3w.blogidol.ro’
</script>
<script type="text/javascript"
src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
</script>

Make sure you replace 3w.blogidol.ro with your own.doma.in. Don’t forget that nothing prevents you from making your own using hk-404 as inspiration. Keep in mind though that other sites use 404 as a automatic redirect to their homepage.

Sources / More info: notfound.org, tnw, bp-404, syb-404