How To Set Custom Page Not Found 404 Error Page In Blogger?

If you somehow noticed about the Custom Page Not Found Settings in your blogger blog under Errors and Re-directions in Search Preference of your Blogger blog then you must questioned yourself about what is it and I am sure you are curious to know about this option that time and for now too. Let me tell you about that now. Sometimes if you visited any page of your blog which do not exist (through a broken or expired link) then you will be seen a message from blogger that this page does not exists. It looks creepy. Isn't it. You can check that out by placing any keyword after your blog address (like: yourblogaddress.blogspot.com/404). Today, this article is about customizing that default Custom Page not Found error and renovate it with professional looks. So lets start the tutorial.
The message you see by default is like the picture below :

Creating Your Custom 404 Not Found Page in Blogger:

• Go to Blogger.com > Settings > Search Preferences:
• Click Edit link next to Custom Page Not Found

• In this editor simply type your message that you want to display if your reader's land on a page which is broken or does not exists  

You can also try a beautiful 404 error page that we implemented on our blog :

Check Out Demo Of 404 Error Page

• For doing so, you just need to paste the following HTML and CSS coding inside that editor :

<!-- BBeginner.Com 404 Error -->
<div class='BB-404-box'>
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj97SjLJqEzructcSEiEIo3q1HwuEEO1HsqOgS9msv0JRDPcf19tPKSm6j7ADMCE4xr3O8tZoJ2Thxpo05hNvFrtd-Z7nA-1nwW7nEQ60sNXty7F-1GWPA5b3K0yMlp3WqmvhnHkyrHVzKS/s1600/404-error-page.png" />
</center>
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a Page that no more exits. 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>Report the Problem to us by <a href='http://www.bbeginner.com/contact'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
    <li>Go To Homepage by <a href='http://www.bbeginner.com'>Clicking Here</a>
      <br/></li>
  </ol>
  <p>
    <br/>
    <br/>
    <br/></p>
  <p align='center'><font color='#0080ff' 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>
</div><div style="text-align: right;">
<span style="font-size: small;">Designed by <a href="http://www.bbeginner.com/" target="_blank">BBeginner.Com</a></span></div>
</div>
<style type='text/css'>
.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;
}
.BB-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;
}
</style> 

• Don't forget to replace the above yellow highlighted links with your blog address and contact page. 

For better layout you can also implement full width coding and hide sidebar in your 404 error page. For doing so visit : How To Create Full Width Page And Hide Sidebar In Blogger?

Thats all! Save the Settings and You are done! Now visit your blog through any link that doesn't exists and you will see this amazing 404 error page. 

Also Check : How To Add/Install Google Analytics To Blogger?

Let me know your views and queries in comments below.