Create Professional 404 Error Page in Blogger.

Today, we shall be discussing on how to make our 404 error page look Professional and helpful to the visitor of the link.
If you don't know the meaning 404 error page, It simply means a page that has a broken,deleted or non-existing Link clicked by Your Blog Reader.



Actually, Google has set a default page for 404 error Page. But, with this tutorial we will make it Professional and helpful for the visitor in such a way that it provide the visitor with three things:

1) Go Back to the page from where he came from. We will use JavaScript here.

2) Contact the Admin and inform him about the broken link. This will help you track broken links

3) And finally to provide a link to homepage.

Make 404 Error page to look Professional

*. Goto www.blogger.com/home >> Settings >> Search Preference

*. Click on Edit link in front of :Custom Page Not Found

*. Copy and Paste the Code below into the Box

<!-- MBT Default Template -->
<div class='MBT-404-box'>
<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 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 by<a href='http://www.nairaden.com/p/contact-us_31.html'><b>Clicking Here</b></a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
<li> Go To Homepage by<a href="http://www.nairaden.com"><b>Clicking Here</b></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>

Note: Replace http://www.nairaden.com/p/contact-us_31.html with your Contact Page link.
Also Replace www.nairaden.com with your Homepage link

*. Click the Save changes button and you are half way done.
*. Now go toTemplate >> Edit HTML
*. Search for this ]]></b:skin>
*. Just below it paste the following style sheet 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>


To change the background colour of the box edit #FFFFFF

*. Save your Template.
*. Done!!

Visit any page of your blog that do not exist to see it working just perfectly. You may type anything after your blog address to see the 404 error appearing. For example like:

http://yourblog.blogspot.com/blablabla
or
http://yourblog.blogspot.com/xyz
or
http://yourblog.blogspot.com/anything-here
etc....

SHARE THIS