Custom 404 Error Page for Blogger:Digital Tech Inspiration

Blogger introduced to new Search preferences for BlogSpot blogs. One of the features was "Errors and redirections" in simple we can say the "404 Error" page that appears

when a broken link is clicked which tells the visitor that the page no more exits. By default, your Blogger Error Page will display an error message in a grey box like this.

The message display looks little ugly and therefore need a better creativity for a 404 Error Message. If you want to add custom unique 404 error message then you have to disable the above default message. This is how my 404 error page looks like.

To disable Blogger's by default status follow below instructions:

Designing of 404 Error Page for Blogger

Simply follow the easy steps below to display 404 error message uniquely.

STEP #1: Log on to Blogger.

STEP #2: Go to Dashboard>Settings>>Search preferences

STEP #3: Click on Edit link next to: Custom Page Not Found

STEP #4: Inside the box paste the following code:

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


Oops!
 
Looks like you either clicked a broken link or a Page that no more exits. Kindly do one of the followings:

<ol style='line-height: 25px'>
 <li><a href='javascript:history.go(-1)'>« Go Back</a> </li>
 <li>Report the Problem to us by <a href='http://wikitechnol.blogspot.in/p/contact_8.html'>Clicking Here</a>    (This will help us serve you even better) </li>
 <li>Go To Homepage by <a href='http://wikitechnol.blogspot.com'>Clicking Here</a>
 </li>
</ol>

 
 
 
404
 

Page Not Found!

Customization:

You can edit the bolded texts with anything you like
Replace http://wikitechnol.blogspot.in/p/contact_8.html with link of your contact page
Replace http://wikitechnol.blogspot.com with your homepage link
Replace above image link in RED with your own custom designed 404 error image link or you can use the default one.

STEP #5: Click the Save changes button and you are half way done.

STEP #6: Now go to Template > Edit HTML

STEP #7: Search for this ]]></b:skin>

STEP #8: Just below it paste the following code:

<b:if cond='data:blog.pageType == "error_page"'>
<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;
}
.WT-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>

Customization: To change the background colour of the box change #FFFFFF

STEP #9: Save your template.

How to test Custom 404 error page working?

Browse any page of your blog that do not exist to see it working just perfectly. You may type anything after your blog address to see the 404 error appearing. For example like:

http://yourblog.blogspot.com/any_page_that_does_not_exist