How to Create Error 404 Page For Your Blogger Blog

How to Create Error 404 Page For Your Blogger Blog

The 404 error page is very important to every blog visitors because this will help them to navigate to the right page for appropriate view.
Having the 404 error page enables you to have long lasting visitors and this has to do with different process but all you need to do is to follow this simple steps below.


First procedure

Step 1
You need to login to your blogger account and then click on the blog you want to work on.

Step 2
Now scroll your mouse down to the settings tab and just click in it

Step 3
On the settings drop down menu click on search and preference button

Step 4
Now after the meta tag description you will find the custom page not found just click on the edit button by the side.


Step 5
Now copy this code below and paste it inside the box given to you and click on the save changes button below.

<!-- ZB Default Template -->
<div class='ZB-404-box'>
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
</font> <font color='#666666'>
It Looks like you have clicked a Page that no more exits. Kindly do one of the followings:
  <ol style='line-height: 25px'> 
    <li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
    <li>Report the Problem to us for our engineer's to work on it by <a href='http://www.zealmat.com/p/contact-with-power-of-technology-you.html'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you better, we care</em>) </li>
    <li>Go To Homepage by <a href='http://www.zealmat.com'>Clicking Here</a> 
  <p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
  <p align='center'/>
  <p align='center'><font size='5'>Page Not Found!</font></p> 

Change the link in red to your home page link and also your contact link too

Second procedure

Step 1
Now scroll down your mouse to the template tab and then click on it then on the template page click on edit HTML.

Step 3
Then make sure that you backup your template first before performing this task.

Step 4
Now on your keyboard press CTRL+F button and then search for this code below


Step 5
Now paste this code below the above code

<b:if cond='data:blog.pageType == &quot;error_page&quot;'> 
<style type='text/css'> 
.status-msg-wrap { 
    font-size: 100%; 
    margin: none; 
    position: static; 
    width: 100%; 

.status-msg-border { 

.status-msg-body { 
    padding: none; 
    position: static; 
    text-align: inherit; 
    width: 100%; 
    z-index: auto; 

.status-msg-wrap a { 
    padding: none; 
    text-decoration: inherit; 
.MBT-404-box { 
  margin:10px 0px; 
  padding:20px 10px; 
  border:1px solid #ddd; 
  box-shadow: 5px 5px 5px #CCCCCC; 


Step 6
Now click on save button and that's all

Don't forget to drop your comment below thanks.