How to create custom 404 error (page not found error) page for blogger

What is 404 Error (page not found error) According to wikipedia?

The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested.

The web site hosting server will typically generate a "404 Not Found" web page when a user attempts to follow a broken or dead link; hence the 404 error is one of the most recognizable errors users can find on the web.

A 404 error should not be confused with "server not found" or similar errors, in which a connection to the destination server could not be made at all. A 404 error indicates that the requested resource may be available again in the future; however, the fact does not guarantee the same content.

How To design Your Own 404 error (Page not found error) Page :

In Blogger you can your 404 error page easily just follow the steps given below:

1.Login to Blogger Dashboard

2.Go to Settings -> Search Preference
3.Click on the 'Edit' link on Custom page Not Found

4.Now Design Your custom 404 error page by using HTML & CSS. 

---

Don't know about designing page in HTML and CSS. Don't Worry here is a ready-made code for you just paste this code :

<style type="text/css"> #error-404 { border: 20px solid #1B1B1B; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; } </style> <div id="error-404"> <span>404</span>
</div> <h1 class="large-heading" style="text-align: center;">Page not found.</h1> <h2 class="light-heading" style="text-align: center;">Sorry, the page you were looking for in this blog does not exist..</h2>

---

5.Click on 'Save Changes'

6.You Are Done.