Create custom 404 Error Page for Blogger

Customize blogger 404 Error page in blogger with information and back link to home page or to sitemap - Blogger sitemap table of contents page.This helps the visitor to continue in your website until what the searched in for.This option is available for all blogger blogs to customize error page or redirection.This nothing but a page appears when user clicks on the broken which doesn't exist in the blog or website of won domain.Here we provide the bloggers custom 404 page in two different styles.You can opt it which matches your style.

Design 404 Error Page in Blogger - CSS

• This provide a link to previous page of your blog.
• A link to home page.
• Then a link to contact Blogger Administrator.

We already have an option in blogger to customize the error page for broken links which we need to optimize for better appearance. 

1. Log in to blogger.
2. Then settings > search preferences
3. Then click edit link in custom page not found.
4. Then inside the box paste the below codes.

style 1

<div class='b4l-404-box'>
 <p align='center'>
 <span style="color: red; font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: 150px; line-height: 18px;"><b>404</b></span></span></p>
 <p align='center'><span style="color: #0080ff; font-family: Georgia, 'Times New Roman', serif;">
 <span style="font-size: 150px; line-height: 18px;"><b><br/></b></span></span></p>
  <p align='center'><span style="color: #0080ff; font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: 150px; line-height: 18px;"><b>Error</b></span></span></p>
  <p align='center'>
<br />
  <p align='center'>
<br />
  <p align='center'>
<b><span style="font-size: x-large;">Page Not Found!!!</span></b></p>
<br />
  <p align='center'>
<a href="http://www.blog4al.com"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkoAHVTCIb9DG0YFUbl8b8un7tp0XUD4R1tsVywegG_GAM0TDDLpgkOzUnavTwwHhnjjTWm85aeQSmNpbLhZcOnAOSV9L9Nd-NolfLNGqC_CIMxYgioOQpTeZTY5CIZ0UGhlorke-R9yi/s1600/home+button+2.jpg" /></a>
<a href="http://www.blog4al.com/p/contactus.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnT9zZ5ESl2272NRB0QUF6SWxVfZXmqm5ukYEOtcNHSZana7NEeoHCqcc2WFBaqap4HHI88_zVNBFQ6zovKV4OJPRfDQ5eZibF1ZctP5TVK3-53zqmhyphenhyphen6VnCA3RjcInH51jFSgfPVqnBt/s1600/contact+button+2.jpg" /></a></p>
You can look at our <a href='http://www.blog4al.com/p/sitemap.html>sitemap</a>
</div>

• For above you can create sitemap from - blogger sitemap table of contents

or

style 2

<div class='b4l-404-box'>
<p style='line-height: 30px'>
<strong>
<font color='#ff0000' size='5'>
Oops!
</font>
<font color='#666666'>
Looks like you either clicked a broken link or a Page that no more exits. Kindly do one of the followings:
</font>
</strong>
</p>
<ol style='line-height: 25px'>
 <li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
 <li>Report the Problem to us by <a href='http://blog4al.com/p/contactus.html'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
    <li>Go To Homepage by <a href='http://www.blog4al.com'>Clicking Here</a>
      <br/></li>
  </ol>
  <p>
    <br/>
    <br/>
    <br/></p>
  <p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
  <p>&#160;</p>
  <p align='center'/>
  <p align='center'><font size='5'>Page Not Found!</font></p>
</div>

Now replace the highlighted link with the your own blogger link.Then save the setting now we need to add the css script to the blogger template.

404 error page css code for blogger

•  Now go for template then search for ]]></b:skin>
• Then "below / after" that code add the following code.

You can use any one of above block of code but the css code is to override the default bloggers style of custom page.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'><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;}.b4l-404-box {  background:#FFFFFF;  width:98%;  margin:10px 0px;  padding:20px 10px;  border:1px solid #ddd;  -moz-border-radius:6px;  -webkit-border-radius:6px;  border-radius:6px;  box-shadow: 5px 5px 5px #CCCCCC;}</style></b:if>

• Then now save the template.

Now when ever any user clicks the broken then they will see this page.