How To Create 404 Error Page In Blogger

Blogger has introduced new search preferences along with creating your own error page. Now blogger users can create their "custom 404 error page" for their blogs. "404 error page" appears when a visitor clicks a broken links and it tells the visitors and search engines that the page you clicked no longer exists or is deleted. This error page loads inside your blog's body at the place of your posts in a simple grey box called "status bar". By default you can give your users a warning or a message but in this tutorial I will give you an optimized and designed error page.

SEE OUR ERROR PAGE HERE

Creating Error Page

Note: Before proceeding, make sure that blogger status bar is not hidden otherwise the error page will not appear.

1. Go to your Blogger Dashboard >> Settings >> Search Preferences.

2. Now click edit next to: Custom Page Not Found.

3. Now insert the following code in the field:

<div class='freshtips-404-page'>
  <p style='line-height: 30px'>
<font color='#418909' size='5'>
Sorry!
</font><font color='#000000'>
It appears that the page you are looking for is deleted or does not exists. Please do one of the followings:
</font></p>
    <li>Go To Our <a href='http://freshtips.blogspot.com'>Homepage</a>
      <br/></li>
    <li><a href='http://freshtips.blogspot.com/p/contact.html'>Report the Problem</a> to us.&#160;&#160;&#160;</li>
    <li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
</div> 

4. Now search for ]]></b:skin>.
5. And just below it, add the following code:

<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;
}

.freshtips-404-error {
  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>

6. Now save your template and you're done.
7. Now you can view your error at:

http://yourblogurl.blogspot.com/xyz    or   http://yourblogurl.com/xyz

How To Change Title For 404 Error Page?

Normally the title of your 404 error page will be your blog's url by default and it will affect your SEO and as well as rankings. So you can also edit the title for your 404 error page by following steps:

1. Go to Blogger Dashboard >> Template >> Edit HTML.

2. Now check the box of Expand Widget Template.

3. Now search for the following code:

<b:include data='blog' name='all-head-content'/>

4. Now just below this code, add the following code:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title><data:blog.title/></title>
</b:if>

5. Now your error page title is set as your blog's title, but you can edit your title by editing the following line in the code:

<title>YOUR 404 ERROR PAGE TITLE</title>

6. Now save your template and you'll see your error page title in your browser's Tab.