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.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

6 comments

  1. Timia Lewis on

    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?

    Reply