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/

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.

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>

Useful things to add to your 404 page

• A simple link or a clickable button to direct readers to another page like your contact page.
• Some popular blog topics using post labels or create a list of some popular posts.
• A newsletter signup/optin..
• A search box or social media icons

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;}

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.