Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Create Stylish 404 Error Page In Blogger

by Durodola Ridwan | Sunday, September 23, 2012 | | 6 Comments

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

6 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. thanks bro really nice post in ur site, i am enjoying the site and its true that ur site is one of the i've seen.Nice information you’ve posted Fobble Up! Always Up!
    Thanks for posting good Article Software
    Your post is very useful Blog Tips and tricks I will surely
    like and join ur site in future, be in adding good posts to ur site. peace and blessings.
    Thanks…:)

    ReplyDelete
  2. Drclare offers the latest in non-surgical facial enhancement. High quality medical aesthetic procedures at competitive prices. botox potter bar Discreet service, in private location, by a qualified medical doctor.

    ReplyDelete
  3. These are actually neat! Bloggers should have a sense of humor when adding this up to their sites.

    Cheers,
    Sean Rassmusen

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. It’s really such nice information to get advantage from. MacFarlane Gro

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger