How to display custom page not found error 404 error in blogger blog

page not found error appear when a visitor opens a page that does not exist. or when the page viewer is trying to visiting is deleted. It's mean every broken link will redirect your visitor to the 404 error page (page not found). blogger blogs have a default style page that is simple. but blogger allows you to display custom page not found error 404 error in blogger blog.

and this post is about showing custom page not found the error in blogger blog. if you want to display custom page not found Error to your visitors. then follow our below steps.

display custom page not found error 404 error in blogger blog

1. sign in your google account and go to the blogger.com
2. select your blog where you are going to display custom page not found Error.
3. from the blog, dashboard clicks on the settings link.
4. now go the search and preferences.
5. in the errors and redirection tab, you will see a custom page not found. at the front of the custom page not found click on the edit link.
6. a text box will appear just paste the following code in that text box. and press the save changes button. 
   

<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/AVvXsEgFvXuNKBMvJ0-fSXxRz9lBToT9oJrh2LOVgCq8OvgwuLrPZ8z53JkB7vMi5l_dgLyh6Dz2NNAlTooXtarqMIK52F9UsCIAU6DYCKqArCMIgj6uFauoKJ12yXSert_ZTjeav3jE-I4pbenH/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>
<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>
<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='search...'/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
</form></center>
<p style=’line-height: 30px’><strong>
<font color='red' size='5'>
Oops!
</font> <font color='#666'>
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 😀 ??? <br/> Kindly do one of the followings to go to the correct location of this blog 😀 :
</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='ENTER YOUR CONTACT PAGE URL HERE'>Contact us</a>&#160;&#160;&#160; (<em>This will help us to serve you even better</em>) </li>
<li> <a href='HOMEPAGE URL HERE'>Go To Homepage</a>
<br/></li>
</ol>

in the above code just replace HOMEPAGE URL HERE with your home page URL. and enter your contact page URL with your contact us page URL.
that's it thanks for reading this post. keep visiting for more useful posts. if you don't understand any step you can ask me by dropping your comments.