Custom 404 Error Pages for Blogger

Custom 404 Error Pages in Blogger 404 error page is the page that will be displayed when the actual page is not found . Till now Blogger’s error page was a plain old design with more of orange in it and was not customizable. Now Blogger Error pages use the same template as what you use for your Blog. This tutorial will help you in setting up a Custom 404 page for your Blog.

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

custom 404 page for blogger

You can Change this message to something else from the Blogger Settings.

The option is there at Settings > Search preferences > Custom Page not Found

blogger-custom-404-message

If you want more than just a message, then we will have to fill up this text area with some HTML Code. This is how my Error page Looks like

Instructions

  1. Login to your Blogger account and go to the Template page and proceed to Edit HTML 

    blogger-edit-html

  2. Now Click somewhere within the Blogger Template Editor and search for </head>
    find-head-in-blogger-template
    and immediately before that paste this snippet
    <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;
    }
    </style>
    </b:if>

    This code snippet will reset the default styling given to the Blogger Message Wrapper.

  3. Save the template by clicking on the Save Template button and go to a page on your blog which doesn’t exist.
  4. You should be able to see the change now. The grey background and the border around the 404 status message would no longer be there.
  5. Now Let’s see how we can improve the look and feel of our 404 page. I would suggest you to use inline CSS styles to improve the look and Feel of your 404 message.Here is a sample HTML template which you can paste into the text box at Search preferences > Custom Page not Found.
    <h3>Your requested page was not found</h3>
    <p>Sorry, we cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.<br/>
    Please check that the Web site address is spelled correctly.</p>
    <b>Other things to try:</b><br/>
    <ul>
    <li>Go to our <a href="/">home page</a>, and use the menus or links to navigate to a specific post.</li>
    <li>
    <form method="get" action="/search">
    <table width="100%">
    <tr>
    <td><input type="text" style="width:95%;padding:2px;" value="Search this blog.." onfocus="if (this.value == &quot;Search this blog..&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" name="q"></td>
    <td><input type="button" Value="Search"></td>
    </tr>
    </table>
    </form>
    </li>
    </ul>
  6. It will give you something similar to my 404 page.
  7. If you are creative, you can add more stuff to the 404 pages.

Detecting an Error Page

Blogger has introduced a new page type called "error_page" and you can detect it using b:if conditional tags.

The following condition checks if a page is an error page or not.

<b:if cond='data:blog.pageType == "error_page"'>
This is an Error Page
</b:if>

 

Changing the Error Page Title

By default the title of the Blogger Error Page is your Blog Title. If you want to change it to something else, you can Edit your template and change

<title><data:blog.pageTitle/></title>
to
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

If you are using my Title Tag Hack or derivatives of that available on the internet, then you will have to change

<!-- Start www.bloggerplugins.org: Changing the Blogger Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
<!-- End www.bloggerplugins.org: Changing the Blogger Title Tag –>

to

<!-- Start www.bloggerplugins.org: Changing the Blogger Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
</b:if>
<!-- End www.bloggerplugins.org: Changing the Blogger Title Tag –>

 

As I always say, if you get into troubles, you can use the comment form , Forum or our Facebook Wall :)

I’m sure that this is the first tutorial on Blogger 404 Pages on the Internet. Do share and keep us live :D

37 comments :

  1. I have problem with changing error page title

    ReplyDelete
  2. @Arham - well you are using my Title Tag Hack or derivatives of that available on the internet.
    I have updated the post :D

    ReplyDelete
  3. Hi Blogger Plugins, I followed your instruction and my result is, the title Page not found appear but there's no text 404 Opps... , how to fix this error. Thanks for help

    ReplyDelete
  4. But what about editing robots.txt ? Don't tell us how to make correct robots.txt ?

    ReplyDelete
  5. It's not working

    ReplyDelete
  6. There are 2x
    and 2x

    ReplyDelete
  7. Ah if there are these codes 2 times you have to change both

    ReplyDelete
  8. @Blogger Plugins
    I've a Customized Template for my blog & i've Deleted the status message completely and NOW i don't know where to put this TAG!

    b:include data='top' name='status-message'/>

    Blogger keeps returning errors, please tell me where should i add the STATUS MESSAGE...

    ReplyDelete
  9. Thank you BP!
    i've Resolved my issue :)

    ReplyDelete
  10. [OOT].......
    Can you post "HOW TO ADD Page Intro In blogspot.."
    Thanks for it...

    ReplyDelete
  11. We can add CSS code and content through Custom Page not found option. Blogger is allowing 10k words. So the space is plenty. We can add javascript, CSS and HTML here. This is my 404 page. http://www.bloggerhow.com/404

    ReplyDelete
    Replies
    1. yea you are right. Restyling the Message Wrapper and filling the text area with the HTML code is the best way to get this done.

      Delete
  12. can you help me in error page, its not working for my site!!

    ReplyDelete
  13. Love this update Blogger Plugins :)

    ReplyDelete
  14. ha ha it is working for my blog now...
    thank you friend.

    ReplyDelete
  15. hey! see my blog .. 404 not found with auto search google with the keywords http://goo.gl/RyPxe

    ReplyDelete
  16. I can't get this work.
    The error page shows up but it looks like a label page with no posts.
    I pasted your text into the text box but all is visible in the box is:
    "These are the posts in the required category."

    Could you please help me out?
    Many thanks.

    ReplyDelete
  17. hi BP,
    Im using the code dynamic Title tag as you suggested, but I find a problem: when clicking OlderPosts in my Homepage, the title of those page will appear the sames as the url of them, ex: myblog.com/search?ddfffakjf... so do you have any idea how to fix this. Thanks

    ReplyDelete
  18. Thanks for this great tutorial BP!

    ReplyDelete
  19. Ty, works for me! Great hack btw. xx

    ReplyDelete
  20. I get this message:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The string "--" is not permitted within comments.

    Every time I try to change the Title Tag Hack. I suppose it is because this code: But why can't I change it? I try to change the " into "

    Any solution?

    ReplyDelete
    Replies
    1. @Tim - If you want to post codes in the comment form, you will have to escape it. Or use my Facebook Page or the forum.

      Delete
  21. i would have loved it if you havn't just shown the text but a full customized page. like a proper designed page... and its very easy like uploading a simple pic..

    ReplyDelete
  22. Blogger Page not found message not display....

    ReplyDelete
  23. Great tip. I did everything right except the title thing. But somehow I managed now. Things look settle on my blog now. Thanks!

    ReplyDelete
  24. Can I change the order posts are in now?

    Can I keep 1 post as the first one on the list?

    Thans.

    ReplyDelete
  25. it is nice one because there are most of the broken links in my other blogs and custom error page will somehow show professionalism ,i mean at least user will see that admin of this blog knows about broken links and the good thing about this blogger twik is it is automated.going to install according to your directions in my blog.thanks for ahring.

    ReplyDelete
  26. Its not working for me.. need more details about XML langauge

    ReplyDelete
  27. Please help me! how to fix this issue: The string "--" is not permitted within comments

    ReplyDelete
  28. you can email me at : muhammadubaidghauri@gmail.com : please mail how to fix this issue: The string "--" is not permitted within comments

    ReplyDelete
  29. love it + happy blogger = thanks so much :D

    ReplyDelete
  30. my title wasn't changing, how to fix it?? (andry5ury4.blogspot.com/404)

    ReplyDelete