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.

Follow this step :

Go to Blogger → Setting → Search Preference

Follow this step :

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/AVvXsEimf9KNtqQDNW5gVSWNXQMzwjivXBz-kAKnIuLaSQeYQuLBO5us6nC8XUArqNOXI0jipbSPOVnZLiyDLPastZE0S8BJUgcieA3AGZuAsnjJt96z566PqTgQT419iXdDclPZyxi8n3YtLk4/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/AVvXsEiTPYjcjZAWihQzPY_lkaSZxob5SCuOv_P8LSOjMMe27g45zTtPo6BNehJqaEeB-9eHr6zDhWZaI9aLgpXmzbIURnutxuCz50Xhz_Z3j9L5ONGwZ1KVHSMiTO28bLOBFLg-7e1viy0M734/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