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


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.

Buy me a coffeeBuy me a coffee

21 Comments

  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?

  2. 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.

  3. 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.

Sorry, comments are closed!