Add a Custom 404 Page Not Found for Blogger

In this post i will teach How to enable custom 404 Error page for blogger. This SEO custom 404 page appears only when a reader visit a page that does not exist or deleted.In the past with old Blogger interface we're unable to create a custom error page but now it's possible because now that option is also available in search preferences settings.You can create a custom error page as per your blog design and creativity.Those who don't know about 404 Error page can read the below post to understand it.

Click Here to see demo

Also Read : How to Add Support us Widget for Blogger. 

Follow this step :

• Go to Blogger → Setting → Search Preference

• Now under Error and redirections you can find Custom Page Not Found. 
• Click on edit option.

• Now a box will appear,In the box paste the bellow code.

<style>
#error-page {
    background: #007dbd;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilFPprKClCIsxfdw98v1S6ZOgteX4o0eZjY-k5oI0rxEaZemNj_aHOSqIBxprYHg6obS0w9UXg9zbUvTWGvjNB0kKkvg9ue0UViemo09DdEy0ppgF_WpQ2G9Gzm0vc4icXsfvvEgcv2-k/s1600/nbw404.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #007dbd 0%, #003650 100%);
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb090UZDqSAdTpJnkMF4M9T47QkMuG4BLqB3HY8Nv_4Mxh_PCJOX0sOwM2e-BaWqw5vDnx0_rLK_lZ6VFhGh_hvJeIfldXCiKuRuKzhZajvGVd-vsLkdeSGqKPX213wcVrkZgbMPEQ16A/s1600/nbw-404.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>

• Now Save it and enjoy