How Create a custom 404 Error Page in Blogger

Hi Friends Today I'm sharing how to create a custom 404 error page. It is kind of page which appeared when a visitor click on a broken link. Now a days 404 error page is very important for blogger SEO. It helps to increase traffic on your blog. by following my steps you can create a beautiful 404 error page very easily.

Demo

How to Create a 404 Error page

Step 1.

Go to Blogger Dashboard > Settings > Search Preference.

Step 2.
Copy and paste the code below.

<div class='EBT-404-box'>
<p style='line-height: 30px'>
<strong>
<font color='#ff0000' size='6'>Oops!</font>
<font size='4' color='#666666'>
Looks like you either clicked a broken link or a Page that no more exits.
</font>
</strong>
</p>
<br/><br/><br/>
<p align='center'>
<font color='#a32b33' 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>
 <p style='line-height: 30px'>
<strong>
<font color='#666666'>
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>Go To Homepage by <a href='http://ebloggertechniques.blogspot.com/'>Clicking Here</a></li>
<li>Report the Problem to us by <a href='http://ebloggertechniques.blogspot.com/p/contact.html'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em></li>
<li>Use the below search to find what you need.<br/></li>
</ol>
<center>
<div id="tvb-searchbox">
<form id="tvb-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
</center>
</div>

Now change the following:
Replace ebloggertechniques.blogspot.com to your blog URL.
Replace ebloggertechniques.blogspot.com/p/contact.html to your contact page.

Step 3.
Go to your Template.

Step 4.
Backup your Template.

Step 5.
Edit HTML.

Step 6.
Find ]]></b:skin> in your Template.

Step 7.
Just Below ]]></b:skin> Add the following code.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
#blog-pager {
text-align: center;
display:none;
}
.status-msg-wrap {
font-size: 100%;
margin: none;
position: static;
width: 98%;
}
.status-msg-border {
display:none
}
.status-msg-body {
padding: none;
position: static;
text-align: inherit;
width: 98%;
z-index: auto;
}
.status-msg-wrap a {
padding: none;
text-decoration: inherit;
}
.TVB-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;
}
#tvb-searchbox{
background:url(http://2.bp.blogspot.com/-Mmv5dnwsL1U/UVbyoXqigrI/AAAAAAAADvY/NcJk2PcSBjY/s1600/searchbox_tvb.png) no-repeat scroll center center transparent;
width:307px;
height:50px;
disaply:block;
}
form#tvb-searchform{display: block;padding: 10px 12px;margin:0;}
form#tvb-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tvb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
</b:if>