Blogger Have Introduced The 404 custom Error Page

By Default, your Blogger Error page will display this error message

If you want to add custom message then you have to disable above default message first...

To disable blogger's by default status follow below instructions :

1. New blogger User Interface.
2. Blogger Dashboard > Design > Edit HTML.
3. Download your template.
4. Add below code just above </head> tag.

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
</style>
</b:if>

custom 404 error templates

here we are sharing collection some cool 404 error template which was collected by Prayag.You can also edit the codes and change it to as you wish.You can use our HTML Editor to see live preview of your changes.

• Now go to Settings > Search Preferances. (In new User Interface)
• Choose one of the 404 template below
• Copy code and paste it in textarea box and save box.

CUSTOM 404 ERROR TEMPLATES - 1

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq7zLP4TFTvrci-u8VQUYUcaNoR-BfVTOK91NAJr1PXPTzMh8SX82UM_Zg0iVt4uaISjeCdldrf8Ly6YxIHdTVpL6DRsdwEJfWZvemMl_NLJckKs9lNET2a41gZH07JhyphenhyphenC7U1pCM-mJIA/s1600/404+error+page+7.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

CUSTOM 404 ERROR TEMPLATES -

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YfuPYaRYSQGDp7xHCu46zV7pGeH-uvNTPT6opSgyuCcqq8hjESxUKDkO6CiPPcJpJi1yj0mQcirF7tuNaCPa7RAJTf66Ci2JLcbUfwRyme10k8-fnOpNJCuZq7ADCN6SgWG_UjnoFgD1/s1600/10.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

CUSTOM 404 ERROR TEMPLATES -

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuPWa7h85dQ5UY9zkGjkLXXM3fMq3NnrxxI8qvyDYEPXODx-dzOCOosohHBjO051o_aje9mKidA4pRwQ7WIgRzqwuwcyqE-zVbwWSPcP3s44jMwGpckQIvGzxEZ_pLj0mWHrbTIR9dgVp/s1600/404.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

CUSTOM 404 ERROR TEMPLATES -

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq7zLP4TFTvrci-u8VQUYUcaNoR-BfVTOK91NAJr1PXPTzMh8SX82UM_Zg0iVt4uaISjeCdldrf8Ly6YxIHdTVpL6DRsdwEJfWZvemMl_NLJckKs9lNET2a41gZH07JhyphenhyphenC7U1pCM-mJIA/s1600/404+error+page+7.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

CUSTOM 404 ERROR TEMPLATES -

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhpPMLECT8p30I1Fz3EEUYcykpihgg5YFHIWE7b2bc47K_K-MOGK-l0ErIWBjvVJJokf0Ia8RgbOyydtSW2HNv_cTvTaNEOKEngAvtK7TWyJdUDwKVd-zGtuaGz5DX3Q2Zhxe3F0uw0I0/s320/404+error+page+1.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

CUSTOM 404 ERROR TEMPLATES -