How to Create a Custom Page Not Found (Error 404 Page) on Blogspot?

Now you can create a Custom Page Not Found (Error 404 Page) for the Blogspot Blogger blog. This page appears only –

1. When a reader reaches a page that does not exist or
2. The Reader types the wrong permalink for a post or page. This type of link is known as a broken link.

You can just check the example of a custom error page on my blog.

Blogger has prepared a new page, “blog.pageType,” which is known as “error_page.” This page type is used as follows in the Blogger template.

<b:if cond='data:blog.pageType == "error_page"'>
<!-- You're Code Here -->
</b:if>

This error page design is an idea only. You can create a custom error page as per your blog design and creativity.

Add Custom Page Not Found (Error 404 Page) to Blogger

1. Blogger Dashboard › Select Blog › Select Settings tab

2. Now, under Errors and Redirects, you can find Custom 404. Now, click on this.

3. Next, a box comes up, and paste the following given code.

4. Finally, click on the Save button to save the code.

CUSTOM PAGE NOT FOUND CODE

<style>
#error-page {
    background: #007dbd;
    background: url(https://4.bp.blogspot.com/--Ri7FNhfPuU/T3p0_rWUvLI/AAAAAAAAHzU/v_V5cF2O9YM/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #007dbd 0%, #003650 100%);
    background: url(https://4.bp.blogspot.com/--Ri7FNhfPuU/T3p0_rWUvLI/AAAAAAAAHzU/v_V5cF2O9YM/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#007dbd), to(#003650) );    
        text-align:center;
        position:fixed;
        top:0px;
        right:0px;
        bottom:0px;
        left:0px;
        padding-top:270px;
        z-index:999999;
}
#error-page  h1 {
        font-size:540px!important;
        position:absolute;
        font-family:impact,sans serif!important;
        top:70px;
        left:50%;
        letter-spacing: -8px;
        margin-left:-502px!important;
        width:960px;
        z-index:-2;
        color:rgba(0,0,0,.09)!important;
}
#error-page  h2 {
        font-family:arial black,sans serif!important;
        text-transform:uppercase;
        font-size:80px;
        line-height:66px!important;
        letter-spacing: -3px;
        color:#fff!important;
        margin:0!important;
        padding:0!important;
}
#error-page p a,
#error-page p a:visited,
#error-page p a:hover{
        font-family:arial black,sans serif!important;
        text-transform:uppercase;
        font-size:56px;
        line-height:40px!important;
        border:none;
        font-weight: bold;
        color:rgba(0,0,0,.5)!important;
        margin:0!important;
        padding:0!important;
        text-decoration:none!important;
}
</style>
<div id='error-page'>
 <h1>404</h1> <h2>LINK BROKEN</h2>
 <h2>PAGE NOT FOUND</h2>
 <p> <a href='/' title='Home Page'> Back to Home Page</a></p>
</div>

Error 404 is a part of blogging and Error 404 customization is very easy with the use of custom CSS.