Monday, 12 November 2012

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="http://1.bp.blogspot.com/-TG4Mj1Nlf2o/UF8PhhVssTI/AAAAAAAABpo/kvDkK8OJnrg/s1600/home+button+2.jpg"
 /></a>

<a href="LINK TO YOUR CONTACT PAGE"><img 
border="0" 
src="http://1.bp.blogspot.com/-rRNyZKR4R6c/UF8PxF7qXGI/AAAAAAAABpw/5ZSgEWitVik/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
Reactions:

0 comments:

Facebook Blogger Plugin: Bloggerized by AllBlogTools.com Enhanced by MyBloggerTricks.com

Post a Comment

Please drop your feedback in the comment box, for us to know how this post has helped. And don't forget to join, by using the 'Join this site' button on the right. Thank you

Related Posts Plugin for WordPress, Blogger...
 
Blogger Widgets Twitter Bird Gadget