Blogger recently introduced 404 error pages along with new SEO update. How to customize the default 404 error status message in Blogger and create beautiful error page.

How to customize 404 error pages in blogger

With the introduction of 404 error page, Blogger is placing another step in SEO.

Why 404 error is displaying?

The 404 errors are arising because of the page requested is not found. Before introducing this feature, Blogger was showing a default error page which was not customizable. It was same for every Blogger user.

How to customize your own 404 page

It is now simple. You can set your content in Search Preferences in Settings. Under Errors and Redirections, select Edit option of Custom Page Found. Here you can enter The content.

How to design a 404 error page

404 error page content uses the same style of status messages. In order to change the appearances, we need to add some CSS codes with content. Important CSS classes are below. It is easy to edit, no need of knowledge in CSS.

<style>
.status-msg-bg {background-color: #CCCCCC;}
.status-msg-body{text-align:left;background:#fff;}
.status-msg-border{border: 0 none;}
.status-msg-wrap{font-size:15px;line-height:29px;}
h2 {font-size:30px;}
h3 {font-size:20px;}
</style>

To set the background of error page, change #CCCCCC and #fff in to a desired value. First one is the background color and second one is the body color.
Border color can be changed using the third line .status-msg-border. Change border: 0 none; into border: 1px solid #000000 for changing border color into black. If you don’t want border color, use border: 0 none; .
Change font-size value for changing font size. use h2 font-size value for changing header font size. h3 font-size can be used for subheadings.

Where to put this CSS codes

Don’t put this CSS codes in your template because it will overwrite all other status message styles. If you want to put this in your Template, find ]]></b:skin> and add following code just above.

<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.status-msg-bg {background-color: #CCCCCC;}
.status-msg-body{text-align:left;background:#fff;}
.status-msg-border{border: 0 none;}
.status-msg-wrap{font-size:15px;line-height:29px;}
h2 {font-size:30px;}
h3 {font-size:20px;}
</style>
</b:if>

Now Go to Custom Page Not Found in Search Preferences of Settings. Add status message as you want. Here is an example.

<div style='align:center'><img src='https://lh4.googleusercontent.com/-RdRSviGM0DI/T21ZAw7LI6I/AAAAAAAAA_0/GdQwk-7aKL0/s800/Ouh.png' /></div>
<h2>Are you lost?. But you are found a page that doesn't exist!</h2>
It seems that the page you are looking for isn't around anymore. <a href='http://www.bloggerhow.com/p/contact.html'>Report it missing using contact form</a>, I'll see what can I do for you. In the mean time you can <a href='http://www.bloggerhow.com/'>browse this blog</a> and check out articles.<br />
You can search this blog for what you are looking for using the <a href='#search'>search box</a> or check popular posts and recent posts from sidebar..<br />
<div id='search'>
<form action='/search' id='searchform' method='get'> 
        <input id='s' name='q' onblur='if (this.value == "") {this.value = "search";}' onfocus='if (this.value == "search") {this.value = "";}' type='text' value='search'/>
    </form>
</div>

If you don’t want to edit your template..

Add CSS code with status message. Here is an example..

<div style='align:center'><img src='https://lh4.googleusercontent.com/-RdRSviGM0DI/T21ZAw7LI6I/AAAAAAAAA_0/GdQwk-7aKL0/s800/Ouh.png' /></div>
<h2>Are you lost?. But you are found a page that doesn't exist!</h2>
It seems that the page you are looking for isn't around anymore. <a href='http://www.bloggerhow.com/p/contact.html'>Report it missing using contact form</a>, I'll see what can I do for you. In the mean time you can <a href='http://www.bloggerhow.com/'>browse this blog</a> and check out articles.<br />
You can search this blog for what you are looking for using the <a href='#search'>search box</a> or check popular posts and recent posts from sidebar..<br />
<div id='search'>
<form action='/search' id='searchform' method='get'> 
        <input id='s' name='q' onblur='if (this.value == "") {this.value = "search";}' onfocus='if (this.value == "search") {this.value = "";}' type='text' value='search'/>
    </form>
</div>
<style>
.status-msg-bg {background-color: #CCCCCC;}
.status-msg-body{text-align:left;background:#fff;}
.status-msg-border{border: 0 none;}
.status-msg-wrap{font-size:15px;line-height:29px;}
h2 {font-size:30px;}
h3 {font-size:20px;}
</style>

This Article is a part of series on Blogger SEO

This is an article from Blogger SEO series. Articles on this series is listed below.

Share this article