Create Stylish 404 Error Page In Blogger

Previously, i published a post on how to add 404 error page, in which i promise to publish more awesome 404 error page, so i will be discussing with you, how you can create 404 error page with cool style and color.
404 page error is a page that appear when a visitor click on a broken link, and this page appears to notify your visitors that they are pointing to an error page. The default error page appears in only plain text surrounded by a grey box which look so much ugly, so i have created two awesome 404 error page which will override the existing style sheet for the error page.

404 Error Page 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="http://realcombiz.com"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOEfTFGcHcmpNN1nOgducLWRYs9l6T61lgXdqE7beA_k6TiI16j9gUGwEhP8iTFHV13So0Mdb1GsnfSGAAw2MwmNkL7etaRgQPZHwexmgms5eCh8qNe3YGlQj7dDbrAYItgXyea-8PX-y/s1600/home+button+2.jpg" /></a>
<a href="http://realcombiz.com/p/contact_13.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaENUGX1xBwEvj1Hwy7AWILWTEc5LtnwrwtdYWXmOe_o7EbMzywf0Eg_9ElpenWi_RF-hrZdAtS8eEeCJ4xHBpjNJSnQ59iSMoCDj5HfC51_JBxJ-6U8n8fw5qkeGDDkzElHydl8SPyMyw/s1600/contact+button+2.jpg" /></a></p></div>

Click on Save changes.

404 Error Page 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://your-blog.blogspot.com/any-text-here
http://your-blog-name.com/any-text-here

In my future post, i will be discussing on how you give the 404 error page more great touch. Don't miss it, and let me know if you need further help.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz