Customize 404 Pages or Redirect Users

A big thanks goes to the Blogger developer team once again for making my day. Earlier this month(I think), I asked them about granting us the ability to customize the 404 pages because I saw that they looked outdated and didn't fit in with the design of most blogs.

Now they've given us a new pageType for 404(Page not found) pages:

<b:if cond='data:blog.pageType == "error_page"'>
  <!-- HTML: do whatever you want -->
</b:if>

Redirecting Users

You can use it to redirect users by adding the following code in the head of your template:

<b:if cond='data:blog.pageType == "error_page"'>
  <meta http-equiv='refresh' expr:content='"5; url=" + data:blog.homepageUrl' />
</b:if>

If you do that, I think you should let them know they are going to be redirected, to where, and why with a brief message. There are two ways you can add it:

  • from Settings > Search Preferences > Errors and redirections > Custom Page Not Found
  • add it to the template directly

1. Errors and Redirections

Edit Custom Page Not Found

Simply click edit, enter your message, then save. The message will only display if the code that displays status messages wasn't removed:

<b:include data='top' name='status-message'/>

If it was, you should know where to add it. If you don't, it's usually right here like this:

<b:includable id='main' var='top'>
  <b:if cond='data:mobile == "false"'>

    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

2. Add it to the Template Directly

If you choose this method, you should remove or comment out the b:include tag for the status message if you don't want to use it, or you can use the b:if and b:else tags to have it appear where it usually does except for on error pages:

<b:if cond='data:blog.pageType != "error_page"'>
  <b:include data='top' name='status-message'/>
<b:else/>
  <!-- error page message -->
  <div class='error-msg-wrap'>
    <p class='error-msg'>This page was removed or it never existed. You will be redirected to the homepage in 5 seconds.</p>
  </div>
</b:if>

Save and you should be done.

Leave a reply