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.

Image

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.

Image




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′>
Oops!
</font> <font color=’#666666′>
It Looks like you have clicked a Page that no more exits. 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 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> 
      <br/></li> 
  </ol>
  <p> 
    <br/>
    <br/>
    <br/></p>
  <p align=’center’><font color=’#0080ff’ style=’font-size: 150px’><strong>404</strong></font></p>
  <p>&#160;</p>
  <p align=’center’/>
  <p align=’center’><font size=’5′>Page Not Found!</font></p> 
</div>




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

]]></b:skin>

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 { 
    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; 
}
.MBT-404-box { 
  background:#FFFFFF; 
  width:98%; 
  margin:10px 0px; 
  padding:20px 10px; 
  border:1px solid #ddd; 
  -moz-border-radius:6px; 
  -webkit-border-radius:6px; 
  border-radius:6px; 
  box-shadow: 5px 5px 5px #CCCCCC; 

</style> 
</b:if>

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

Don’t forget to drop your comment below thanks.

About Mathias Amodu 886 Articles
My Name is Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large

Leave a Reply

*