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.

Custom Page Not Found for Blogger

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

[vc_button title=”Demo of Custom Page Not Found” target=”_blank” color=”default” size=”size_small” href=”http://demo.techprevue.com/2014/03/blogger-custom-page-for-error-404-demo.html”]

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.
Set Custom Page Not Found to Blogger

CUSTOM PAGE NOT FOUND CODE

<style>
#error-page {
background: #007dbd;
background: url(http://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(http://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>

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

Conclusion

Error 404 is now a part of Blogger which is being better day by day and Error 404 customization is a very easy with the use of custom CSS.