Create ‘Page Not Found’ (Error 404 Page) on Blogger Search Preference Settings

Today’s tutorial we educate you how to create a Custome Error page know as ‘Page Not Found’ on Blogger platform template.

When readers/visitors lands on invalid page url the code or page displayed code will be displayed as page broken.

Blogger also enabled error 404 page option on their templates when any visitor type wrong permalink for a post or page.

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

User can also create own code or Error page or Link Broken Page or Page Not Found by using our idea. Let’s begin tutorial for adding and creating Error page on blogger template.

Create Custom ‘Page Not Found’ Error page on Blogger template

Sing into blogger template
From Blogger Dashboard select ‘Settings’ link tab
Click on ‘Search Preferences’
Under Heading ‘Errors and re-directions’ Click on ‘Custom Page Not Found’ [Not Set] Edit link
(As shown in the image below)

Now copy the below code and paste in it

<style>
#KO-error-page {
    background: #007dbd;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDFB2NdzrEWwR8Gh2IksNgj-d77LYPAilsPcEYkPMAEaZ0fX8mkke_scZGoc4p_-tRmzroHpx1Nvow-_g0CR6b46Ho7To_YQeLsXVK9WopYOPVw5U_aPTrnl_g1ACoBHPtKWj7ywsgOxs/s960/bg_body-blogtariff.com.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/AVvXsEiDFB2NdzrEWwR8Gh2IksNgj-d77LYPAilsPcEYkPMAEaZ0fX8mkke_scZGoc4p_-tRmzroHpx1Nvow-_g0CR6b46Ho7To_YQeLsXVK9WopYOPVw5U_aPTrnl_g1ACoBHPtKWj7ywsgOxs/s960/bg_body-blogtariff.com.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;
}
#KO-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;
}
#KO-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;
}
#KO-error-page p a,
#KO-error-page p a:visited,
#KO-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='KO-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>

After pasting code successfully Click on ‘Save Changes’ button
That’s it done


Credit: Urang Kurai