3 Best Error 404 Page Ideas [Blogger]

404 pages play a major role in making a visitor stay in your blog, when he/she comes in through a non existing URL.

Whatever we do, our basic need is to keep visitors on our blog for some time. Keeping that in mind i have chosen 5 Custom 404 Page ideas to share with you guys which may help you make your 404 Page more attractive without any stress.

Before moving into the tutorial please make sure that you have read my tutorial on  How To Create Custom 404 Page Not Found in Blogger

1. Adding A Funny 404 Image To Your Custom 404 Error Page

The best way is to present the link to your homepage with a little humor. The visitor may be bit angry as he/she couldn't find what he/she came for. So better is to present a funny 404 image in front of them to make them relax along with some links so their is a chance for a click.

Code:

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry, You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF8-dNAB8jm11JgXzfyBQ-4fOAR40Lv9NjoF0cJjkwVqXz31CRmzoz9l_Zv4EMxGkD9rN1mL517UiADPAqbeYZxQB65C_DjINvfd3lRj7E77aulqF9zZIuOuFi5PhJxIwEhggFfWdbZcU/s1600/404+error+page+2.jpg"/>

• The text shown in red is the link of the image, you can replace it with URL of any image you like.

2. Redirecting Your 404 Error Page To Homepage

Redirecting back to your homepage is a better idea if you are posting on a specific topic, as the visitor may find some article similar to the one which he/she searched for and may stay and read your posts.

Code:

Sorry, the page you were looking for in this blog does not exist. You will be redirected to homepage shortly. <script type = "text/javascript"> BSPNF_redirect = setTimeout(function() { location.pathname= "/" }, 5000); </script> 

• Those shown in red is the redirect message and you can change it as per your taste.

• The number shown in yellow color is the delay in milliseconds. you can change that to the value you think more suitable

3. Adding A Search Box To Your Custom 404 Error Page

Adding a search box in the 404 page in turn helps the visitor to find out similar articles from your blog. So that there is more chance that your visitor remains in your site.

Code:

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

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

Drop Your Comments And Questions Below.