How to set up a custom 404 Not Found page on your website
The 404 or Not Found error message is an HTTP standard response code indicating that the client was able to communicate with a given server, but the server could not find what was requested. The web site hosting server will typically generate a “404 Not Found” web page when a user attempts to follow a broken or dead link; hence the 404 error is one of the most recognizable errors users can find on the web. (Wikipedia)
How to Redirect 404 Not Found Page Using .htaccess:
Step One: Creating/Modifying the .htaccess File: Open a text document file. Write the following code:
ErrorDocument 404 /YourErrorDocementFile.html
Save the text document as ‘.htaccess’ file.
Step Two: Creating Your Error Document File: I attach the code used for the 404 Not Found of orbachinujbuk.com:
<html>
<head>
<title>404 Not Found</title>
<style>
html {
background: url(404notfound.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.div1{
float:right;
color:white;
margin-right:120px;
margin-top:120px;
background: rgba(255,0,0,0.6);
font-family:calibri;
padding:25px;
border:1px solid navy;
border-radius:5px;
-webkit-box-shadow: -1px 1px 10px 2px #000000;
box-shadow: -1px 1px 10px 2px #000000;
}
h1, h2{
text-shadow: 1px 1px 1px #000;
}
.anch{
text-decoration: none;
text-shadow: 1px 1px 1px #000;
color:white;
}
.anch:hover{
color:yellow;
text-decoration: underline;
}
</style>
</head>
<body>
<div class=”div1″>
<h1>Ahhh! Dude, Stop searching…<h1>
<h2>That does not even exist here!</h2>
<a href=”http://orbachinujbuk.com/” class=”anch”>
<b><< Go to Home page</b>
</a>
</div>
</body>
</html>
Step Three: Testing the Error Document: When you’re satisfied with your page, upload it together with your .htaccess file to your website. Then test it by typing a URL that you know does not exist.
Your error page should load up. From this error page, test to see that the links here lead to the pages you intended to lead.
[ Make Some Fun: Just test something after the ‘.com/’ of this Blog on your browser’s URL bar and guess what!? ]