Custom Error Page in your blog in Blogger

This article will teach you How to create professional 404 Page not found error page in blogger. It looks good to have our own created error page in our website or blog instead of default. So, i am going to show you how to add Custom Error Page in Blog.

• Login to Blogger and Open Your Blog.
• Go to Setting > Search Preferences
• Look at "Errors and redirections" tab

You can see here :  Custom Page Not Found ?[Not Set] Edit 

• Click Edit and Select Yes to edit it.
• Now Paste the following code in the box. 

<--------------- Copy below code and paste in box ------->
<p align='center'> <font style='font-size:50px; font-weight:bold;' color='red'> ERROR:404 </font></p>
<br />
<p align='center'><font size='5'>Page Not Found !</font></p>
<br/><br/>
<p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
It looks like you either clicked a broken link or a page you are looking for doesn't exist. <br/> Please choose 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><a href="http://harshinfoworld.blogspot.com">Report the Problem</a>&#160;&#160;&#160; (<em>This will help serve you even better</em>) </li>
    <li>Go to <a href="http://harshinfoworld.blogspot.com">Home</a>
      <br/></li>
<li>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=''/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search'/>
</form></center>
  <p>
    <br/>
    <br/>
    <br/></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDnwI8BwjR6x3sxDVCamvoPUysbw9UVgTFWwZ1NnPMKGUPbDZgXDkpYjUjUs_Bp5Lfo75U0XQes6PVv7eBGux8cP95C5FMMYcngnXiaAEgniWk8Bn2TrBYioZQdUPFwVj3W4XnZ00nxsjt/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>

<------ code ends here ------->

• Replace the Green Color Text with your Domain Name.
• Hit Save Changes.