Create Custom 404 Error Page For Blogger

Some of you might be not knowing what is 404 error page... and how to create cool 404 error page for blogger or any website.

What is 404 error page?

May be you have seen on many websites showing "Page not found". This is the error page displayed whenever someone asks for a page that simply not available on your site. The reason for this may be a link on your web page is wrong or page might be recently removed from your website. As there is no web page to display, hence the web server sends a page that simply says "Page not found".

How does it works?

The 404 error message is an HTTP(hyper text markup language) standard status code. This "not found" response code indicates that although the client could communicate to the server but server could not find what was requested or it was configured not to fulfill the request.

(404 not found page is not same as "Server not found" error.) Server not found is due to connection problems.

How to Create a Perfect and Cool 404 error page?

POINTS TO BE NOTED:

1. Customization of your 404 error page is the first step when improving your web page. Only Default error message is not helpful. 

In most cases, landing on page that results in standard 404 page error means you visitors will have only option to return to previous loaded page. If your user lands on a 404 page from an outside link, then you have no chance of retaining the visitor unless they visit your domain directly. 

Do not expect users to put forth this much effort if you have not put forth the effort to make your page more user friendly.

So, Customization is easy you can create your own 404 page for Blogger and Wordpress.

2. Always try to make your 404 page familiar, when create the 404 page keep the same basic structure as the rest of your site. When a visitor lands on 404 page that looks completely different for your they may wonder if they have left your site completely.

3. Keep your whole website and Logo as it is, because "Our aim of creating a 404 page is To redirect the user to the site they were looking for as soon as possible."  

TIPS:

1. The menu bar at the top of the page should be same as the rest of your site. first make it clear that you have not left our site, and seconds user can find their favorite categories using Menu bar.

2. The statement, your 404 page should clealry stat that the page is not found, but you can say the same using different statement like 

• "Ohh!!, the page you're looking for can't be found."
• "It looks like you found a Dead Link".
• "Something gone wrong, it's likely temporary so please check back soon."
• "Oops!!! Page not found."
• "Couldn't find error."

You can use such statements it really make as impression on the user.

3. At lower of the page give some categories acc. to your website. This makes it easy to scan across and down to locate (most likely) what you were looking for.

4. The search box at the top of your webpage. 

How to create 404 page in blogger?

After considering all the points given it's time to make a new 404 page for blogger.

So let's start.

I have some examples of 404 pages you can use any one from the following.

1. 

To use this 404 page, follow this simple steps.

Copy the code below and paste it in the box and save.

1. <style type="text/css"> #error-404 { border: 20px solid #1B1B1B; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; } </style> <div id="error-404"> <span>404</span>
2. </div> <h1 class="large-heading" style="text-align: center;">Page not found.</h1> <h2 class="light-heading" style="text-align: center;">Please check that there isn&#8217;t a typo in your URL.</h2>

You can customize message beautifully to something else.

2. 

This template contains some standard features like 

• Go back links
• User friendly message.
• Full page width
• Report Problem link
• Go to homepage link
• Stylish search Box
• Big 404 logo

To use this page, paste the following code, in Custom page not found, textbox area as explained above.

<!-- Tips&101Tricks 404 Page -->
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a page that you were looking for doesn't exist. <br/> Kindly do one of the followings:
</font></strong></p>
  <ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
    <li>Report the Problem to us by <a href='CONTACT PAGE URL'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
    <li>Go To Homepage by <a href='HOMEPAGE URL'>Clicking Here</a>
      <br/></li>
<li>Search Anything Using Below Search Box</li>
  </ol>
<br />
 <center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'>
<input id='searchinput' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Type Here & Hit Enter&apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' type='text' value='Type Here & Hit Enter'/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
</form></center>
  <p>
    <br/>
    <br/>
    <br/></p>
<p align='center'><font size='5'>Page Not Found!</font></p>
<br /> <br /> <br />
<p align='center'> <font style='font-size:150px; font-weight:bold;' color='red'> 404 </font></p>
<style>
.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;
}
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
#searchinput {

background: #FFF url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYfIt-P43nwym2BfOiQlmQ0xNJ48def1w_YoLVc8BaCL6VkRxVXnR9Bhei1MfxazVX_azpfjcklOZo07wfRcU1j8SS5eGl2xvp7W_vSsfrAqiEMa88W72zMhMlSti0mGM8rGP8pnx7B3Od/s0/search.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
color: #A0A0A0;
display: inline-block;
font-family:arial;
font-size: 12px;
font-weight:bold;
height: 24px;
width:300px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
#searchinput:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
#searchbutton {
background:#444;
color:#fff;
height:35px;
border-radius:5px 5px 5px 5px;
box-shadow:1px 2px 1px 1px #ABABAB;
border:1px solid #fff;
margin-top:3px;
padding:8px;
}
#searchbutton:hover{background:#555;}
</style>

• Replace Contact page URL with your contact link
• Replace HomePage URL with your homepage link

How to check this page?

If you want to check your webpage, just type anything after you URL like, 

tip101tricks.blogspot.com/abcd and click enter you will see your 404 page.

You can change color and fonts by changing the color codes.

That's All!!!

If you liked this article, Subscribe Us for our email updates and Like Us on Facebook.