The HTTP 404, 404 Not Found and 404 error message page is a Hypertext Transfer Protocol (HTTP) standard response code. This error often occurs when you follow a broken link or if you type in a website address that doesn’t exist. A 404 page error appears when a website is active, but the specific page within it doesn’t exist. A different error appears if the whole website you’re visiting is unavailable. Blogger has its own 404 page but it looks slightly outdated. You can easily add custom 404 page to blogger using blogger error conditional tag.
How to setup custom 404 page for blogger ?
Step1: Go to Blogger>Theme>Edit Html .
Step2: Search for <body expr:class='"loading" + data:blog.mobileClass'> or <body> and paste below codes just after it.
Step3: Now, Search for ]]></b:skin> and paste below conditional CSS codes just after it.
Step4: Save theme , That's it.
How to setup custom 404 page for blogger ?
Step1: Go to Blogger>Theme>Edit Html .
Step2: Search for <body expr:class='"loading" + data:blog.mobileClass'> or <body> and paste below codes just after it.
<b:if cond='data:blog.pageType == "error_page"'>
<div class='404page'>
<div style='line-height: 30px;'>
<div style="font-size:20px;">
<div style="display:block;margin:0 20px;">
<br/><br/><strong><span style='color: red; font-size: 30px;'>
Oops!</span> <span style='color: black;'>
Looks like you either clicked a broken link or search a Page that no more exists. Kindly do one of the followings:</span></strong><br/>
<span style='color: black;'><b>1.</b> <a href='javascript:history.go(-1)'>« Go Back</a></span><br/>
<span style='color: black;'><b>2.</b> Report the Problem to us by</span> <a href='YOUR CONTACT PAGE URL'>Clicking Here</a><span style='color: black;'/><br/>
<span style='color: black;'><b>3.</b> Go To </span><a href='/'>Homepage</a><br/>
<br/></div></div>
<div class='separator' style='clear: both; text-align: center;'>
<a href='' imageanchor='1' style='margin:auto;'><img border='0' height='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivDTKrk9i2jGScRjxep4R5ydcUMcLukhZCkeDMKyEnMkxc_zDUpd1Plnh70SNFFfxh6M6sTN1ctCUmb5mHbw82_jHPF7C3RphHISfle5QF0Xkoe5kmE2uuxt8hrRSBm7AJRY2em0BvzxSs/s1600/eyes-304338_960_720.png' width='60%'/></a></div>
<div class='separator' style='clear: both; text-align: center;'>
<br/></div><div class='separator' style='clear: both; text-align: center;'>
<br/></div> </div></div></b:if>
<div class='404page'>
<div style='line-height: 30px;'>
<div style="font-size:20px;">
<div style="display:block;margin:0 20px;">
<br/><br/><strong><span style='color: red; font-size: 30px;'>
Oops!</span> <span style='color: black;'>
Looks like you either clicked a broken link or search a Page that no more exists. Kindly do one of the followings:</span></strong><br/>
<span style='color: black;'><b>1.</b> <a href='javascript:history.go(-1)'>« Go Back</a></span><br/>
<span style='color: black;'><b>2.</b> Report the Problem to us by</span> <a href='YOUR CONTACT PAGE URL'>Clicking Here</a><span style='color: black;'/><br/>
<span style='color: black;'><b>3.</b> Go To </span><a href='/'>Homepage</a><br/>
<br/></div></div>
<div class='separator' style='clear: both; text-align: center;'>
<a href='' imageanchor='1' style='margin:auto;'><img border='0' height='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivDTKrk9i2jGScRjxep4R5ydcUMcLukhZCkeDMKyEnMkxc_zDUpd1Plnh70SNFFfxh6M6sTN1ctCUmb5mHbw82_jHPF7C3RphHISfle5QF0Xkoe5kmE2uuxt8hrRSBm7AJRY2em0BvzxSs/s1600/eyes-304338_960_720.png' width='60%'/></a></div>
<div class='separator' style='clear: both; text-align: center;'>
<br/></div><div class='separator' style='clear: both; text-align: center;'>
<br/></div> </div></div></b:if>
Note: Change red text with your contact page.
Step3: Now, Search for ]]></b:skin> and paste below conditional CSS codes just after it.
<b:if cond='data:blog.pageType == "error_page"'>
<style>
.content{display:none;}
</style>
</b:if>
<style>
.content{display:none;}
</style>
</b:if>
Step4: Save theme , That's it.
