Blogger - Create Custom Error 404 Page Not Found

It's never a good first impression when a new user comes to your site and gets an 'error 404 page not found'.  This can happen for any number of reasons; URL typo, index problems or just bad template coding.These errors can happen to any of your site viewers, not just new ones, but until you can get around to sorting your URL directories out it's always a good idea to create a custom 'page not found'. 

Bloggers default message is displayed within your templates header and footer post section.  The generic message is a bit basic and plain especially by not having Cascading Style Sheets aka CSS.

Generic message

Sorry, the page you were looking for in this blog does not exist.

Search preferences

Luckily Blogger gives us the option to make our own custom page not found message.  This tutorial will show you how to add your own custom HTML message and add CSS. 

Lets get started, go to your blogs dashboard, click settings > search preferences.

Error and redirections, custom page not found

Then click on the custom page not found edit link and this will give you a text box.  Here you can enter an HTML message that will be displayed on the 'Page Not Found' page instead of the generic message.

Error and redirections, custom page not found text box

The HTML code

Add the simple HTML code below to the custom page not found text box and save changes.

<div class="pagefound">
<div class="links">
<h2>Our bad, page not found!</h2>
<h3>Were you looking for one of these pages?</h3>
<ul>
<li><a href="URL">LINK HERE 1</a></li>
<li><a href="URL">LINK HERE 2</a></li>
<li><a href="URL">LINK HERE 3</a></li>
</ul>
</div>
</div>

To customise the code with your own links just replace URL with www.yourdomain.com/mypage and LINK HERE with Domain Text.

To test your 'error 404 page not found' page type slash /anything at the end of your URL.  For example www.yourdomain.com/dsa432fds.

Now for the CSS part, go to Templates / Customise

Customise template

Click Advanced, scroll down to Add CSS, you should now see a text box.

Blogger Template Designer

The CSS code

Add the CSS code to the text box and click Apply to Blog

 .status-msg-border {visibility: hidden; }
.pagefound {
background-color: white;
background-image: url(IMAGE URL HERE);
height: 400px;
}
.links {
width: 80%;
margin: 0 auto;
position: relative;
top: 20%;
background: transparent;
}
.links h2 { padding-top: 3em; }
.links ul {
list-style: none;
padding-bottom: 3em;
}

How to customise the CSS code with your own background image?  Simply replace the IMAGE URL HERE with your own image url.

Error 404

Example background image url; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG85W1Y-0eWq_xxlmSgyT3IFixhyphenhyphenSSmfTUIOllqE429qvggOFKphroM98O0b3NuB8gh9wbXS3HDcdx3qXvQNosat_ZWM0jpksN-G_leR14WQ4j9bP1bZXsDm3Fe0BtW23DvOKsIjl3hTk/s320/error404-background.png

Testemplate blog example of error 404 page not found

Testemplate blog error 404 test

This is just an example of what you can do with your custom page not found option in Blogger.  You can get as creative as you like with CSS, and add your own text to the HTML code, good luck and have fun.