Skip to main content

Create a Custom "Page Not Found" for your Blogger Blog

If you have ever followed a bad link or typed in a URL incorrectly you have landed on a 404 "Page Not Found" Error page. For your Blogger blog, the default is a generic message:
Sorry, the page you were looking for in this blog does not exist.
Blogger "Page Not Found" message shown in different Themes
The format depends on your Blogger blog's Theme, but the message is the same.

But it's more common that sites use a custom error message, with a friendly greeting, navigation links or a search box, and funny, cute or interesting images.

Custom "Page Not Found" messages on Reddit, YouTube and Tumblr

How create a custom "Page Not Found" message for your own Blogger blog.
  1. Create your error page as a Draft Blogger Blog post
  2. Copy the post HTML 
  3. Open your blog's Settings > Search Preferences
  4. Under "Errors and Redirections" click the option to "Edit" Custom Page Not Found 
  5. Paste in the HTML of your Custom Error Page and click "Save Changes"
Note that the HTML must be less than 10,000 characters.

You can test how your error page looks by trying to open a page on your blog that doesn't exist - just add random characters after a slash at the end of your blog's URL.

Read on for detailed instructions.

What you should include on your custom error page

At a minimum add navigation links to help people find what they are looking for. That is what I've done on this blog's error page. The links can go to your blog's home page, a label, static page or links to popular posts.

Other possibilities:
  • Your contact information
  • Embedded search box
  • Link to your site's feed
  • Link to subscribe
  • Embedded social media posts
And, of course, a friendly greeting and nice picture.

1. Create a Custom Error Page as a Draft Blogger post

If you know HTML, or just want to add a brief message, you could create your custom error page right in the Custom Error Page settings box. But for a more formatted page or for adding an image, the easiest way to do that is to create a draft Blogger blog post and copy the HTML.


1. Sign in to Blogger
2. Click the New Post button
3. Create your post in Compose mode, adding and formatting text and inserting images
4.  Save your post, but do not click the Publish button 

Note that the HTML must be less than 10,000 characters, so keep it short and sweet

2. Copy the Custom Error Page HTML

In the post editor:
1. Switch from Compose mode to HTML mode
2. Highlight and copy all the HTML code
3. Save your post, but do not click the Publish button 
4. Click the Close button to close the post

3. Open your blog's Search Preferences Settings

Custom Error Messages can be configured in your blog's Search Preferences Settings.


1. Open your blog's main administration page at www.blogger.com
2. On the left menu click Settings
3. Under Settings click Search Preferences

4. Create the Custom Error Page

Now you can create your blog's Custom Error Page.

1. On the Search Preferences page go to the section Errors and redirections
2. Next to Custom Page Not Found  click Edit


3. In the Edit box type in your message or paste in the Custom Error Page HTML 
4. Click Save Changes

That's it!

Comments

  1. Hi Peggy!

    I'm not even getting the standard default error message - just a blank page where the content should be :/

    I have tried a number of tutorials - mostly the same thing explained slightly differently - but am not having any joy. The previous blog template I was using worked fine for this, but the current one seems to have an issue I cannot identify.

    Here's an example post that should be redirecting to my custom 404 page but isn't >>

    https://www.gingerurchin.com/2010/09/recycle-fashion.html

    Would appreciate your thoughts on what I need to do. Thanks!

    ReplyDelete
    Replies
    1. This is where things should be redirecting to >>

      http://www.gingerurchin.com/p/not.html

      Delete
    2. Hi Beka: did you create a custom error page? The error page should not redirect to a Blogger page you created, as that would not correctly register as an error. You need to copy the HTML of the page your created, and then enter that HTML in the "Custom Page Not Found" settings, as I outline in my tutorial.

      Have you tried that?

      Delete
    3. Hi Peggy. Thanks for getting back to me.

      Yes. I followed the instructions exactly. No luck.

      My previous template did indeed have the standard 404 redirect to a custom page that I created for the job but this no longer seems to be working with the new one. When you use the search option for 'zombies' (for example) nothing comes up either.

      Seems that there is something missing altogether for both the 'no results found' with search, or for pages/posts that have been removed.

      The code I was using in the 'custom page not found' settings for the redirect was from here, I believe >>

      http://eutectics.blogspot.ca/2014/06/blogger-custom-404-error-page.html

      Delete
  2. Have only just got around to this. On my old blog - your instructions work perfectly!
    The new one using the Soho template ... says bluntly ... there's nothing here.

    ReplyDelete
  3. Sigh. Custom page not found doesn't work with the new themes. And that is where I need it!

    https://productforums.google.com/forum/#!topic/blogger/juZOrSpvyFc;context-place=topicsearchin/blogger/page$20not$20found

    ReplyDelete
    Replies
    1. I am so sorry for the late reply. Your comment was in the moderation queue which I'm way behind on clearing :(

      This should be fixed now. It works for me :)

      Delete
  4. Bro how to design my http://mdsohelranaz.blogspot.com site like u help me

    ReplyDelete
  5. Sorry - very late to get around to this. Have followed all your instructions.
    Still says bluntly - There's nothing here!

    I wonder - clear the cache?

    ReplyDelete
  6. Sigh. No - clear the cache didn't do it either.

    ReplyDelete
    Replies
    1. It should be working to create a custom Page Not Found now. Is it not saving Or not displaying? I'd suggest trying a different browser, and temporarily disabling any extensions or add ons.

      Delete
  7. Thanks for that. Really helpful.

    ReplyDelete
  8. How to fixed this error whenever I paste the HTML and CSS code in blog post and to HTML after a gain come to post HTML and CSS code disappear and display only out put why this fixed properly visit:techlife95

    ReplyDelete
  9. thank you so much :D Mr hacker

    ReplyDelete
    Replies
    1. How Create a custom 404 Error Page for your Blogger Blog

      I want to copy the script

      Delete

Post a Comment

Spam and personal attacks are not allowed. Any comment may be removed at my own discretion ~ Peggy