HOW TO CUSTOMISE THE 404 NOT FOUND PAGE ON BLOGGER

HOW TO CUSTOMISE THE 404 NOT FOUND PAGE ON BLOGGER
16 FEB 2016 WEB + CODING 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

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