How to Create Error 404 Not Found Page In Blogger

Error 404 Not Found is an essential page that be manifest when a broken link is clicked by a visitor it tells the visitor which the page he clicked that's no more show oneself or it is deleted. The error404 page uncovered inwardly your post body as like a encompassed a highlight yellow box. By default, you can be setting your plain text with HTML tags in the Custom Page Not Found input box using your blogger dashboard setting option by search preference page. This method I shall describe bellow. If you setting this option then the message display 4o4 not found page but it looks like an ugly.

Recommended: Custom Robots Header Tags Setting For Blogger Blog.

So, we should  make a nice and creative style by some code in our Blogspot blog for a better look. First of all, now I will see you about the demo which I want to appreciate you for using your blogger blog. Please see this demo of our Error 404 Not Found Page.

404 Error Page Design For Blogger Blog

Blogspot is most powerful for blogging but it's have not more feature as like as WordPress. Wordpress is so easy for customizing, SEO setting and designing by using the plugin and his other codes or options but blogger is so critical for editing or setting this design or SEO option. So we need manually setting SEO and other important option which is recommended search engine algorithm like as 404 Not Found Page. 

Recommended: How to SEO Optimize You Blogger Post Titles Updated.

Today I am gonna showing you how to set up your nice and customized 404 Not Found Page. This page raises your blog visitors from the broken link or the wrong page will important link and provide him three significant option they are bellow.

1. Go Back to the main page from there where he came from. We  will use JavaScript for that.
2. 2nd option: contracts the blog admin for inform him about the broken link page or post. This option helps you for track and solve the broken link.
3. 3rd Option: this option provides the visitors to homepage link.

Now let's see how to settings it.

• First, go to Blogger Dashboard >  Settings > Search Preference.
• Click on Edit link beside Custom Page Nor Found.
• Inside the custom page not found box paste the following code:

<!-- MBT Default Template -->
<div class='MBT-404-box'>
  <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.megaupdate24.com/p/blog-page_17.html'>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.megaupdate24.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>

•  Now customize the Codes.
• The orange color codes http://www.megaupdate24.com/p/blog-page_17.html replace your contract page Link.
• The green color codes http://www.megaupdate24.com/ replace your homepage link.
• Now click the Save Change button and you are half way done.

Error 404 Not Found Page 2nd Step Setting Is

• Now go to blogger Template > Edit HTML.
• Search ]]></b:skin> inside the HTML code.
• Just under it paste the following code:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<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;
}
.MBT-404-box {
  background:#fbbc05;
  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 #4285f4;
}
</style>
</b:if>

• Now you are fully done.
• If you want to change your Background color Just change #fbbc05 it.
• Save your Blogger template.
• Finally Done.

For check your Setting 404 Not Found Page you may type anything after your blog address on your web browser and press enter, you can see a nice error page.

http://www.megaupdate24.com/404
http://www.megaupdate24.com/xyz
http://www.megaupdate24.com/blabla
http://www.megaupdate24.com/anything what you want

Hopefully, you are successfully created Error 404 Not Found Page by following this post. If any problem for doing it you must inform me via comment. Don't forget to share it with social media like Facebook, Twitter, and Google+.