How to Create a Custom 404 Error Page for your New Blog

Table of Contents

The steps for adding custom 404 error page is quite easy on blogger. It can be very helpful for your visitors to let them know that they have visited an invalid page on your site.

Custom 404 error page

In simple, If your visitors visit a wrong link to your blog, then this 404 page will appear in that case.

Today in this tutorial I will show you easy tracks to insert a 404 error page to your blog.

Why Do I Use Custom Error Page?

If you have a new blog, then normally it will show a blank page instead of an error page. But if you add a custom error page instead, then they will clearly know that they have visited a wrong page and it will also help them navigate your blog properly.

Note: If you are using custom theme then it may contain an error page. So, make sure there’s none before implementing the procedure.

For example, take a look at this picture:

Custom error page blogger

In this photo, you can see that it’s saying, “Sorry, the page you were looking in this blog does not exist”. This simple note can help your visitors know that they’ve visited an error page and they can go back to try a different page.

Steps for adding a custom error page in blogger

1. Open your blogger dashboard, hit Settings and Search Preference. Now under Errors & Redirection, click Edit in custom page not found an option.

adding custom error page to blogger

2. Copy the below codes and paste in the blank box and hit save changes button.

adding error page in blogspot

Congratulations! You’ve added a custom error page to your site. Now, if you want to check whether the page is working correctly or not then follow these footsteps:

In the URL bar, enter your site URL then add ‘/’ sign and type 1234.HTML. For example,

In case you’re using custom domain:

Now, if the error page is appearing then it’s working correctly, but if it’s not. Then, copy & paste the same code I provided.

404 Error Page HTML Codes

1. Simple text error page

Custom error page
<b:includable id='status-message'>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<h1 class='errornum'>404</h1>
<h2 class='error'>Page Not Found!</h2>
<p>Sorry, the page you were looking for in this blog does not exist.</p>
<p>Go To Homepage by Button Below</p>
<class='fa fa-hand-o-down'/>
<div class='clear'/>
<a class='homepage' href='/'>Home Page</a>
2. Stylish error page
error page demo
<div class="separator" style="clear: both; text-align: center;">
<a href="
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img
border="0" data-original-height="1600" data-original-width="1132"
height="640" src="
width="452" /></a></div>
3. Simple horizontal error page

404 error page
<div class="separator" style="clear: both; text-align: center;">
<a href="
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img
border="0" data-original-height="315" data-original-width="560"
height="360" src="
nZ7GelFCRwCLcBGAs/s640/error%2B%25281%2529.png" width="640"
For more free custom 404 error pages, check out this post.


By using above method, you will be able to employ design error page on your site within few minutes. Just, make sure the error page is working correctly or else it will end up with a blank page.

Have you applied the above procedure to insert a custom 404 error page to your site? Let me know the consequences into the comment box below and you find this post useful, then share this page with your friends and collaborators.

Leave a Comment

Your email address will not be published. Required fields are marked *