Recently one of our reader asked us through an email that how we can create a professional looking custom 404 error page for blogger blog that’s why I have decided to cover an article on this topic. In default 404 error page of blogger, blogger will just shows a message saying ” Sorry, the page you were looking for in this blog does not exist “.
But In custom 404 error page, we can add several features to our those readers who accidentally lands on the 404 error pages. We can customize it by giving the option to contact us, option to go to at the homepage of the blog etc.
So without wasting more time, lets get back to the tutorial to learn that how we can create custom 404 page for blogger. 
Create Professional Custom 404 Error Page in Blogger
1. Go to Blogger.com >> Settings >> Search Preferences >> Custom Page Not Found under Errors and Redirection section as showing in the below image.
2. Click on Edit then a box will appear as showing in the above image where you need to paste the following code.
<!– Farhan Tutorials 404 Page –>
<p style=’line-height: 30px’><strong>
<font color=’#ff0000′ size=’5′>
Oops!
</font> <font color=’#666666′>
It seems that you have accidentally landed on this page which does not exists because you may have either clicked on a broken link or entered the wrong URL in the address bar. Right
</font></strong></p>
<ol style=’line-height: 25px’>
<li><a href=’javascript:history.go(-1)’>« Go Back</a> </li>
<li>Report the Problem to us by <a href=’ENTER YOUR CONTACT PAGE URL HERE‘>Contacting Us Here</a>    (<em>This will help us to serve you even better</em>) </li>
<li>Go To Homepage by <a href=’HOMEPAGE URL HERE‘>Clicking Here</a>
<br/></li>
<li>Search Anything Using Below 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 == '') {this.value = 'Type Here & Hit Enter';}’ onfocus=’if (this.value == 'Search the site') {this.value = '';}’ type=’text’ value=’Type Here & Hit Enter’/>
<input id=’searchbutton’ style=’vertical-align: top;’ type=’submit’ value=’Search!’/>
</form></center>
<p>
<br/>
<br/>
<br/></p>
<p align=’center’><font size=’5′>Page Not Found!</font></p>
<br /> <br /> <br />
<p align=’center’> <font style=’font-size:150px; font-weight:bold;’ color=’red’> 404 </font></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(http://1.bp.blogspot.com/-DqsSIdDHoXE/UC7emvfWcII/AAAAAAAAAwo/X7HUuvC4oBs/s000/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>
3. Replace ” ENTER YOUR CONTACT PAGE URL HERE ” with your blog’s contact page link.
4. Replace ” HOMEPAGE URL HERE ” with your blog’s homepage link.
5. Click on SAVE CHANGES & You are Done.
Don't Forget to Subscribe my Channel for More Videos :)
EmoticonEmoticon