How to customise the 404 not found page on Blogger

The not found page on Blogger is really boring and unhelpful. It doesn’t encourage your readers to visit other areas of your site or help them find something they are looking for.

This tutorial will show you how to edit the content and design to make it more user friendly.

If you want to have a look at your 404 not found page, the easiest way to get to it is to type 404 after your URL – http://yourblogname.blogspot.com/404/

edit 404 not found page on blogger

How to add content to your custom 404 page in Blogger

1. Go to Settings > Search preferences, and click edit under Custom Page Not Found.

Customise 404 page blogger

2. Now you can add any message and HTML that you want, like so

<h2>Sorry, this page could not be found</h2>
<p>Try the search box below to find what you're looking for.</p>

<form id="searchThis" action="/search" style="display: inline; margin: 20px auto;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this blog" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q" /> <input id="searchButton" value="Go" type="submit" /></form>
custom 404 error not found page blogger

Useful things to add to your 404 page

How to edit the design of your custom 404 page in Blogger

Want to edit the design to match your blog theme and branding? Here’s how to do that. First let’s take a look at Bloggers default code.

/* Blogger CSS for 404 Page
----------------------------------------------- */
.status-msg-wrap {
    font-size: 110%;
    width: 90%;
    margin: 10px auto;
    position: relative
}

.status-msg-border {
    border: 1px solid #000;
    filter: alpha(opacity=40);
    -moz-opacity: .4;
    opacity: .4;
    width: 100%;
    position: relative
}

.status-msg-bg {
    background-color: #ccc;
    opacity: .8;
    filter: alpha(opacity=30);
    -moz-opacity: .8;
    width: 100%;
    position: relative;
    z-index: 1
}

.status-msg-body {
    text-align: center;
    padding: .3em 0;
    width: 100%;
    position: absolute;
    z-index: 4
}

.status-msg-hidden {
    visibility: hidden;
    padding: .3em 0
}

.status-msg-wrap a {
    padding-left: .4em;
    text-decoration: underline
}

If there’s certain things you want to change, you’ll need to override it. To do this copy the above code and paste it into the CSS section of your blog (Template > Edit HTML > above ]]></b:skin>) then change the values to suit you.

Add some custom styling to change the design of the message

1. Go into the Template > Edit HTML and find ]]></b:skin>

2. Right above ]]></b:skin> add the following CSS

/* Custom 404 Page by XOMISSE
----------------------------------------------- */
.status-msg-wrap { /* style entire wrapper */ }
.status-msg-body { /* style div around text */ }
.status-msg-border { /* style border */ }

3. To give us a plain starting point we’ll add some CSS as shown below. This will remove the default CSS such as the border, change the background to white, change the width to 100%, remove top spacing and hides the repeat box.

/* Custom 404 Page by XOMISSE
----------------------------------------------- */
.status-msg-border {border: 0;}
.status-msg-body {background-color: #fff;}
.status-msg-wrap {width: 100%; margin: 0px auto;}
.status-msg-bg {background: transparent;}
change 404 error not found page blogger

4. Now you can continue to add to the CSS to suit your overall blog design. If you only want to style the 404 Page and not the breadcrumb “showing posts with label” message then use conditional tags to target only the error page.

Post last updated:

21 responses to “How to customise the 404 not found page on Blogger”

  1. hi!
    Because I changed the “showing posts with label” to Search Results for: , the 404 page automatically changes to Search Results for: . Is there a way to fix this so that i can have both a 404 page and a Search Results for: page?

    1. Hello, you can use conditional tags to target only the error page and only the label/search pages.

  2. Thanks for the helpful post.
    I will try to apply on my blog.

  3. Rahmawati

    very good tips for custum error page…thanks xomisse

  4. Thank You soo Much for this useful post! I was looking for it for a long time.

  5. thanks for this post. help me alot. keep posting such content for blogger in future.

  6. Thanks for the article. I just applied it on my blog

  7. Wow this is luvly, am gonna implement it on my blog. I just pray it works for me.

  8. Thanks for this useful tutorial

  9. Thanks for this wonderful update it was really helpful

  10. Paul Gupit

    Is there any other way in HTML source that we can customize it.

  11. Nice design. I added custom 404 page for my website. I customized according to my requirements and added extra code. It looks good thank you.

  12. What a great tutorial. Thanks so much for sharing.

    I did it slightly differently by copying your code and putting it in the CSS edit field in theme/customise/advanced/add_CSS/Add_Custom_CSS and then hit ‘apply to blog’ and it seems to work really well. I hope that’s not the wrong thing to do. I added to provide some padding to make it look less crammed.

    Thanks again.

    David

    1. Hi David! By adding CSS to the Theme Customiser CSS section, it will just place it within your theme (see here for details). That way is fine but I usually find that more errors can creep into your code using that method so just something to keep an eye on.

  13. I am returning to blogger after several years. I see a lot of things have changed, they started providing lots of configuration options like modifying 404, robot.txt etc.

  14. Thank You so much, it really working well.

  15. Thank You so much, it really working well. I looking for an article to help me to do this, finally i founded

  16. nice information

  17. thank you for share.

  18. Sagar Koradiya

    thank u sir… helpful artical

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.