Monday, September 10, 2012

How To Create 404 Error Page In Blogger Blog

Author: Gagan Masoun
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

By Default, your Blogger Error page will display this error message
Worth Reading:

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=''>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=''>Click Me</a>
  <p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
  <p align='center'/>
  <p align='center'><font size='5'>Page Not Found!</font></p>

Remember Notes:

  • You Can Replace The Red Highlighted Texts With Your Own
  • Replace Yellow Highlighted URL's With Your Contact and Home Page Respectively.
Search Preferences
  • 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 {
.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 {
  margin:10px 0px;
  padding:20px 10px;
  border:1px solid #ddd;
  box-shadow: 5px 5px 5px #CCCCCC;
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: or

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;'>
  • 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.


  1. Thanks for this...btw, do you have any idea if Blogger will be fixing their mapping of domain names issue???

    1. To point your Blogger blog to your domain name, you set up domain name mapping, which configures your blog settings and domain name. You update your settings in your Blogger account and your Domain Manager:

      1.Park the domain name you want to use with your Blogger account on our parked nameservers.

      2. Edit the www CNAME record for the domain name you want to use with your Blogger account. This update tells the Web browser to open your Blogger blog when visitors enter your domain name's URL in the browser address bar.

      3.Forward your domain name to use www. This step ensures your Blogger blog displays for visitors who go to your domain name with or without the www prefix. For example, it displays for visitors who entered both and

      4.Configure your Blogger account to use your domain name.

      Any DNS changes you make can take up to 48 hours to reflect on the Internet.