How To Create 404 Error Page In Blogger Blog

Now you can create your own error page in Blogger's new interface.The "404 Error" in simple language is a page that appears when a broken link is clicked and it tells the reader that the page he/she clicked no more available or is removed.Blogger users can make "custom 404 error page" for their blogs.

By Default, your Blogger Error page will display this error message,"Sorry, the page you are looking for in this blog does not exist".This tutorial will help you in setting up a an optimized and designed Custom 404 page for your Blog.

Live Demo

By Default Error Message

Worth Reading:

• Add Social Sharing Widget With Search Bar To Your Blog
• 30 Awesome Google Search Tips To Become A Better Searcher

How To Create 404 Error Page In Blogger Blog

Note: Before proceeding, make sure that blogger status bar is not hidden otherwise the error page will not appear.Now, Simply follow the easy steps below to display 404 error message with stylish way.

• Go To Blogger > Settings > Search Preferences
• Click on Edit Link Near To : Custom Page Not Found
• Paste Given Below Code In Empty Box

<div class='BlogsDaddy-404-Page'>
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Not Found..Sorry!
</font> <font color='#666666'>We cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.Please check that the Web site address is spelled correctly.Please 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 Issue To Us By <a href='http://www.blogsdaddy.com/p/contact-us.html'>Clicking Here</a>&#160;&#160;&#160; (<em>We are working hard to fix all the missing resources.</em>) </li>
    <li>Go To Homepage Via <a href='http://www.blogsdaddy.com'>Click Me</a>
      <br/></li>
  </ol>
  <p>
    <br/>
    <br/>
    <br/></p>
  <p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
  <p>&#160;</p>
  <p align='center'/>
  <p align='center'><font size='5'>Page Not Found!</font></p>
</div> 

Remember Notes:

• You Can Replace The Red Highlighted Texts With Your Own
• Replace Yellow Highlighted URL's With Your Contact and Home Page Respectively.

• Click On Save Changes Button
• Now Go to Template > Edit HTML > Proceed
• Search For This ]]></b:skin>
• Just Below It Paste 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;
}
.BlogsDaddy-404-Page {
  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 Color Of The Box Edit #FFFFFF (Yellow Highlighted) 

• Save Your Blogger Template and Its All Done
• Now You Can Check Your Blog Page Error At:

http://yourblogurl.blogspot.com/blogsdaddy or http://yourblogurl.com/143

How To Change Title For 404 Error Page? 

The title of your 404 error page will be your blog's url by default and it will affect your SEO rankings. So you should also change the title for your 404 error page by following steps:

• Go to Blogger Dashboard >> Template >> Edit HTML > Proceed
• Now Check The Box Of Expand Widget Template.
• Now Search For The Following Code:

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

• Now Just Below It, Add The Given Code

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

• 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>WRITE 404 ERROR PAGE TITLE HERE</title>

• Now, Save Your Template & Visit Your Blog.

I will publish some exclusive new designs for the 404 error page display If you need my help then you can contact us via comments.

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.