Custom Page Not Found (Error 404 Page) - Blogger SEO

Now you can create a Custom Error Page (Page Not Found) for Blogger blog. This page appears only -
1. When a reader reaches to a page that does not exist or
2. Reader type wrong permalink for a post or page. This type of link is known as broken link.

You can just check example of custom error page on my blog. To see error 404 you can click following demo button:

Blogger has prepared a new page "blog.pageType" which is known as "error_page" and this page type is used as following in 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 Error Page (Page Not Found) to Blogger

1. Blogger Dashboard › Select Blog › Select Settings tab › Search Preferences
2. Now under Error and redirections you can find Custom Page Not Found. Next to this there is an Edit option. Now click on this.
3. Next a box comes up and paste following given code and finally click on Save Changes button to save code.

CUSTOM PAGE NOT FOUND CODE


<style>
#error-page {
    background: #007dbd;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZt6fzUTo1ZPWCJ3-Bttq7dgMegIoEIZN8I19vsMTgCJ3HZM0-b_JVZogtH1orsr1CQ76TjOc9Y3puFduit56O5Lbnnl2GV4QmRGizBQkiaj3IPztMNqr8_pZFE1AygCdPhMH3egoxQ10/s1600/bg_body.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/AVvXsEgZt6fzUTo1ZPWCJ3-Bttq7dgMegIoEIZN8I19vsMTgCJ3HZM0-b_JVZogtH1orsr1CQ76TjOc9Y3puFduit56O5Lbnnl2GV4QmRGizBQkiaj3IPztMNqr8_pZFE1AygCdPhMH3egoxQ10/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>

--------------------------------------------------------------------------------
Credit: Urang Kurai - http://urang-kurai.blogspot.com/
--------------------------------------------------------------------------------

Read all related posts to Error 404 Page