Create A Stylish 404 Error Page

As usual, i was surfing the internet and i came across this useful post by a friend and fellow blogger, Durodola Ridwan, a blogger at http://www.realcombiz.com. He spoke about how to create custom blogger 404 error pages and i felt the need to share it with you guys. As we all know, the default error page appears in only plain text surrounded by a grey box which look so much ugly, so he has created two awesome 404 error page which will override the existing style sheet for the error page.

404 ERROR STYLE 1

STEP 1

• Go to your blogger dashboard
• Click on "Design" > "Edit HTML" (Old blogger interface)
• Click on "Template" > "Edit HTML" > "Proceed" (New blogger interface)
• Use ctrl F to find ]]></b:skin> and paste the following code after/below ]]></b:skin>

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

}

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

Simply edit #FFFFFF if you want to change the background colour of the box and click Save template.

 STEP 2

• Now go to "Settings" > "Search preferences" 
• Click on Edit link next to Custom Page Not Found
• Copy and paste the following code in the content box

<!-- 404 Error Page By www.realcombiz.com -->

<div class='RB-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="LINK TO YOUR HOME PAGE"><img border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAx_MFTGTo7yyTopRrAXuOxCHotebFzWYebrNAa5VzRzLWHa56Fj6RzKsvigq_Xn9pkZrqXCXCFQb_f8fs_9PxlhxFpfySu6Z7YkHdQAcB3wgx00QRp45JCMzkNQCGgna92kCVgioR01wb/s1600/home+button+2.jpg"
 /></a>

<a href="LINK TO YOUR CONTACT PAGE"><img 
border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2bebs_vAceCjjl7J5mKGU2Y11_r7KrwAeyqVk3nzH6Cj8T7OiuIpEwH0-ewChBO1Uw9wyhfnOISKiLdCglKLwPJH-RBrf4vIZVBoWt8rX4FkiLPWpvLsWl8I1TTujmjKPtpLT4BbKhADu/s1600/contact+button+2.jpg"
 /></a></p></div>  

Click on Save changes.

404 ERROR STYLE 2

 STEP 1

• Go to your blogger dashboard
• Click on "Design" > "Edit HTML" (Old blogger interface)
• Click on "Template" > "Edit HTML" > "Proceed" (New blogger interface)
• Use ctrl F to find ]]></b:skin> and paste the following code after/below ]]></b:skin>

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

}

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

To change the background colour, then edit #FFFFFF.

STEP 2

• Now go to "Settings" > "Search preference" 
• Click on Edit link next to Custom Page Not Found
• Copy and paste the following code in the content box

<!-- 404 Error Page By www.realcombiz.com -->

<div class='RB-404-box'>

  <p align='center'><font color='#b60000' style='font-size: 
160px'><strong>404</strong></font></p>

  <p>&#160;</p>

  <p align='center'/>

  <p align='center'><font size='5'>Page Not Found!</font></p>

  <p style='line-height: 30px'><strong>

<font color='#ff0000' size='5'>

Whoops!

</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 Clicking <a 
href='http://www.realcombiz.com/p/contact_13.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.realcombiz.com'>Clicking Here</a>

      </li>

  </ol></div>  

Click Save changes, and you are done. To confirm that the error is working, simply type a page that does not exist on your blog like http://www.yourblogurl.com/anytexthere.

We'll working on bringing you more custom 404 error pages.So if you have any suggestions as to what the pages should look like, then drop them in the comments box