How I Styled My Custom Page Not Found in Blogger

If you saw my Blogger Hangout yesterday, you may remember that I talked a bit about Blogger's new Custom Page Not Found option, which allows you to control what your visitors see if they follow a dead link to your blog. As an example I showed the custom error page I made for my blog.

That's just a screenshot, you can check it out live here Page Not Found.

I promised I'd share the HTML and CSS I used to make that happen, so here it is!

The HTML

This is HTML format I used in the field under Settings > Search Preferences > Custom Page Not Found:

<div class="notfound">
<div class="suggestions">
<h2>Uh oh, page not found!</h2>
<h3>Were you looking for one of these tutorials?</h3>
<ul>
<li><a href="">Link One</a></li>
<li><a href="">Link Two</a></li>
<li><a href="">Link Three</a></li>
</ul>
</div>
</div>

To use that template, you'll need to fill in your own links inside the quotation marks after each <a href=, and the titles of your links between the angle brackets of the <a> </a> tags.

The CSS

After I saved the HTML markup, I entered these CSS rules in Template > Customize > Advanced > Add CSS:

.status-msg-border {visibility: hidden; }

.notfound {
background-color: white;
background-image: url(YOUR IMAGE URL HERE);
height: 400px;
}

.suggestions {
width: 80%;
margin: 0 auto;
position: relative;
top: 20%;
background: white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

.suggestions h2 { padding-top: 3em; }

.suggestions ul {
list-style: none;
padding-bottom: 3em;
}

If you're using this CSS, you'll need to add your own background image url into the parentheses in background-image: url(), otherwise the whole thing will just be white.

Here's what each of those rules do, one by one:

1. Removes the border from the page not found status message box.
2. Adds a background image and a height to the box around the suggested links.
3. Adds a white oval behind the suggested links in modern browsers, like Chrome and Firefox.
4. Gives the top heading a bit of padding.
5. Removes the bullet points from the list of links and gives the list a bit of padding at the bottom.

Again this is just an example of what you can do with the new Custom Page Not Found option. You can get very creative with CSS and match the page to the look and feel of your blog. Have fun!