Make a Custom 404 Pages For Blogger Blogs

Today im Going to tell You How to Make a Custom 404 Pages in Blogger. Please Carefully Follow the Below Steps to Add 404 Pages Without Any Difficulties.

1. Go to the Blogger Dashboard ---> Template ---> Edit HTML.

2. Now Search For </head> And Copy the Below Code Above it.

<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>

3.  Now Save the Template.

4. Now Goto Settings --> Search Preferences And Copy the Codes Below the Image  To Custom Page Not Found to Add Attractive 404 Pages With Images.

For Example:

If you Want to Make Any one of the Below Image as a 404 Error page Then Copy the Code Below Any one of the Image  You Wish to Make it as 404 Page and Paste it on Custom Page Not Found as Shown in Below Image.

<style type="text/css" >

body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjUD21r_8OYnGzWgjTP8zAOKSyiDLe48hLsWXJz0sZqkAsSvR1fqSd47wzQ4WesvIRNkbfmI041x4bT9JH2sk9l3dEJp97TK3eaNt_KCumGZHVKjGV_O_2iAHbErkGUxF5XLSSDnXTmeky/s1600/15.gif')  50% 0% no-repeat !important;z-index:10000000;}

.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}

body {min-width: 0px !important;}

</style>

   <style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpN8TT-XelVU_guP8JaGMqvmBAtgjnOFLOVV9phuMRX4PeU01qCSO4EiY0vhk64-DQoh_6PqLRqxACRzjMAIYFqMrjpAZl2O9Rt4kug-S2Wesp_V7vxLobv7tz8IzDkEcqiKWDsgiQs_2T/s1600/14.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>

<style type="text/css" >
    body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdUrJNU2q66YBJD0v3PZAYLIQqoimvcbcTVWB-RSFcURDU-UTpjvAmZ8wJqhwrvpIv1exN-kkb3rfIzbC0rfWW1B3_8zXAdzSmDMuP4kIHMgSwY2eb3dMr4i3qNVtw4tXdkaCamCs_ouJ_/s1600/2.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>

 <style type="text/css" >
    body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRiWzkU9aJTGMLRxz83Q9blCubZCKTMS7GwFy9zZS9FaPNoPdbd6O9FZtf76c1Y1lhJnWsC16xrfnyoWU-kpH8MxXmP-QkPRCDiGXXIc3pWrLOtDRqqihWL51dls7zoO67Sm_C3hjGTSdN/s1600/6.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>

Tip: You can find many 404 Images from Internet. To add those just replace URL Of the Image in the Body of the Codes that is given Below i.e body {background:white url("Place Your Image Link"). Don't change any codes here. Just change the Image URL on the Body of the Codes to add 404 Pages with your own image.