Create A Custom 404 Error Page In Blogger

A 404 Error page results when a user asks for a page in your site which isn't available or never existed. 404 error is HTTP Page not found status and technically speaking, it happens when the client is able to access servers but servers couldn't find the requested material. For example you type an invalid address with any active domain, so the domain will be accessible but servers will fail to produce any data for that address so you will get a 404 Not found error.

There might be broken links of your blog on internet due to any reason. They would all give a default error saying "Sorry, the page you were looking for in this blog does not exist." On blogger you can easily change this text to any of your choice but you aren't given any options to customize whole page. Its customization can only be done manually so in this post we will be learning how to make professional looking 404 error pages using HTML and CSS.

Before proceeding further make sure that your status messages are allowed to appear as this 404 error is a status message. To check it follow the below steps.

Check If Your Blog's Status Messages Are On:

1. Go to blogger dashboard > Template > Edit HTML.
2. Click anywhere inside the template and press CTRL+F to find the below line.

<b:includable id='status-message'>

3. Click on left side black arrow to expand the whole code and check if the whole code is present below it which looks like following lines.

<b:includable id='status-message'>
      <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
        <div class='status-msg-border'>
          <div class='status-msg-bg'>
            <div class='status-msg-hidden'><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style='clear: both;'/>
      </b:if>
    </b:includable>

4. If these default lines are present then you are ready to customize your error pages. If the code is not like this and is very short, just replace that with above.
So after it you will see status messages for any page type.

Customize Text Of 404 Error Page:

If you are satisfied with layout of default 404 page error and want to change text only. Follow the below steps.

1. Go to Settings > Search Preferences > Errors And Redirections.

Below this heading you will find Custom Page Not Found Field.

2. Click on Edit.

3. In the editing box, write your own message and save the message.

Create Custom 404 Error Page:

If you visit HelpITx 404 page, you will find that we have not only changed the text but also inserted image and tried to give it a professional look. In this section I am going to share some cool looking 404 Error pages which you can add to your blog.
For adding a page go to Settings > Search Preferences > Error And Redirections > Custom Page Not Found.

Add the code for its respective style and save template.

Style 1:

Below is the code for this style.

<style>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
    text-align: center;
}
.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;
}
.status-msg-body img {
   width: 100%;
}
</style>
<h1>Go Back<a href="http://www.helpitx.com" rel="nofollow">Home</a></h1>
<img height="750px" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiztEx2m3Oaqz5R7R5Pt3OJkOGM4u4Vsrofr5PRlJ5Mq4R6CN0ANkhNkfZH-ibL9ODZAVIyGA_oPxibKIA1tA1dgs9_hM3IbL_QkWEDq7QGGSHezM59VJUIQlg_6DhKMibdr7Qw7ry9eMrH/s1600/lost-84525_1280.jpg'></img>

Style 2:

Below is the code for style 2.

<style>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
    text-align: center;
}
.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;
}
.status-msg-body img {
   width: 100%;
}
</style>
<h1>Return To<a href="http://www.helpitx.com" rel="nofollow">Homepage</a></h1>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtQtmCAL664I9ZZPc-GI_IpnXCpL51BVMzyAiYZy08npt87u4ltNaK0bsZiC5koo87wSm8Z-1up6pLObXPjXil7uFACHKJvo_aIlNO-3kwAFSd08lhBYNCP3zsmMsvD39yI24EGAFzXOuY/s1600/chain-297842_640+copy.png'></img>

Style 3:

The code for this style is given below.

<style>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
    text-align: center;
}
.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;
}
.status-msg-body img {
   width: 100%;
}
</style>
<h1>Return To Our<a href="http://www.helpitx.com" rel="nofollow">Homepage</a></h1>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh57h_d-HyIQ3RVIyeyNDT_B0WgF3PqrUyi_jpEHOSevxIWDIGqOwgqtw5NFGZEMFGLqFgaDWJ-p77VA3qSE3F4ja2N-h22k9NdjA4yovwzAEFpiQ95JBUmSlLGOvGhhk0VIpSAB2fE9KUG/s1600/workstation-148084_640.png'></img>

Style 4:

Below is the code for this style.

<style>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
    text-align: center;
}
.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;
}
.status-msg-body img {
   width: 100%;
}
</style>
<h1>Return To Our<a href="http://www.helpitx.com" rel="nofollow">Homepage</a></h1>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDBRv-VIu_AId0d7te3SkR11l2pyvGiBw_jtqRChu7tisC1ZxlEkC1UAd3QKHG2j4IxRqREQxfn8MdmhfStkAunZ3-aBeemMBve5nqPtP82Eo8HeTHvYbymoCN-1FSdhI0MCFb7C_P3YH2/s1600/error-101407_1280.jpg'></img>

Style 5:

Below is the code for style 5.

<style>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
    text-align: center;
}
.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;
}
.status-msg-body img {
   width: 100%;
}
</style>
<h1>Return To Our<a href="http://www.helpitx.com" rel="nofollow">Homepage</a></h1>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4UToajLb3tcbKv6dVkm93QrdoviYk8OEy4lFgQ8x4PvkUIfttD8aFZyFIrKzgdN3JTOFCloHqt07e2Jzl_Glc5yh6NIQs4wRCTOvAm75uvgfJcU5HkCfBlijfamTWwkdxslsWoH2-XA1N/s1600/error-101409_640.jpg'></img>

Customizations:

• Change http://www.helpitx.com with the URL of your own blog.
• Change yellow highlighted text with your own words.

Check Your Error Page:

After applying changes to your 404 page. Check it by adding any random text with your domain. For example.

http://www.yourdomain.com/404
http://www.yourdomain.com/blahblahblah
http://www.yourdomain.com/randomtext

Replace yourdomain.com with your own blog domain and browse it.

Our tutorial ends here and hope you like it. If you find any difficulty applying these features, don't hesitate to ask us in comments.