Using a good looking 404 error page in your blogger would attract users to stay with your blog. Users who visit your site would be expecting solution for their search. If the link is broken, they get disappointed. On the previous versions of blogger updates we don't have this option. But right now, its available in blogger search preferences.

What is 404 error page?

Web page that redirects all your broken links( deleted post link is broken link). If any user miss types URL then he would be redirected to error page. It is nothing but a 404 error page.

Add a error page in blogger

You might visited many blogs online and found their error pages are customized stylishly. Just check your by typing some wrong URL, and let you know how you error page looks. Ugly..? Don't worry we are here to make it professional. The below given code gives you professional look to your blog by including some options like

• Search Box :   For crawling your site to find exact post
• Back :  Back button to go to previous page, JavaScript used.
• Widgets HIde :  Hiding sidebar widgets giving a dynamic look
• Report : You can give a link to contact page, so that you get noticed when someone reports a link broken link
• Home Page :  Link to your homepage button.

This error page also has a hover effect to search box, onhover colour changes to orange.

1. Login into Blogger
2. Select your blog if you have many
3. Then migrate to SETTINGS --> Click on "Search Preferences"
4. In Error and Redirections >> click on Edit for custom page not found.

Just copy the below code, paste it there, make editing an click on Save Changes

Also Read :  How to change post a comment note with an image in blogger

<!--Stylish BloggerBulk.com 404 Error Page --><div id="stretch" >
<div style="text-align: justify;" >
<p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops! </font> <font size='4' color='#666666'>
Looks like you either clicked a broken link or a page that you were looking for doesn't exist. <br/>
Kindly do one of the followings: </font></strong></p>
<ol style='line-height: 30px;'>
<li><a href='javascript:history.go(-1)'>« Go Back</a> </li> <li>Report the Problem to us by <a href='CONTACT PAGE URL'>Clicking Here</a>    (<em>This will help us serve you even better</em>) </li> <li>Go To Homepage by <a href='HOMEPAGE URL'>Clicking Here</a> <br/></li> <li>Search Anything Using Below Search Box</li>
</ol>
<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></div>
<p align='center'>
<img alt="errorpage by bloggerbulk.com" src="http://media2.intoday.in/indiatoday/images/404-error-page.jpg"/></p>
<p align='center'> <font style='font-size:50px; font-weight:bold;' color='red'> Please Use Above Search Box </font></p>

</div>
<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; } #stretch {
box-shadow: 5px 5px 5px 5px #cccccc; border:3px solid #79a7f1; padding:6px 10px!important; border-radius:5px; -webkit-box-shadow:0 8px 6px -6px #BBB; -moz-box-shadow:0 8px 6px -6px #BBB; box-shadow:0 8px 6px -6px #BBB;
}
#searchinput {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQgRIanQBzJzMg3qQ9W5fb-lqeUtcFsCSp0GcZVDD_IpLNlkZPKpFE7qgY5hOF0QSSHZB7rVTQRs26lXwzNnwKU-ArXUMa9wge-1XKRGaFcpCRO5hRUYHcxQS8np38wKvhBAA4vGz-savB/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; box-shadow:10px 20px 50px 35px #80C8FE; }
#searchinput:hover{
border: 1px solid #bebebe; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 5px 15px 5px 28px; box-shadow:20px 20px 50px 20px pink; }
#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>

If want to remove the image just remove the orange highlighted code. If you want to change the image replace your image link in src="IMAGE-LINK" .  If you want to change width and colour of the border go for blue highlighted code. Editing all your link highlighted above with green colour.