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

Share:
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, https://example.blogspot.com/1234.html

In case you're using custom domain: http://www.example.com/1234.html

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>
</div>    
              </b:if>   
                 <data:blog.pageName/>
                </div>
                <b:else/>
2. Stylish error page
error page demo
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-w8-r8ewFBbY/WmIk4a_tWjI/AAAAAAAACcs/BqRwAA28wW4VKJ4GF7ktr0KyMq
zOlmnXwCLcBGAs/s1600/error%2Bpage%2B%25281%2529.png" 
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img 
border="0" data-original-height="1600" data-original-width="1132" 
height="640" src="https://4.bp.blogspot.com/-w8-
r8ewFBbY/WmIk4a_tWjI/AAAAAAAACcs/BqRwAA28wW4VKJ4GF7ktr0KyMq
zOlmnXwCLcBGAs/s640/error%2Bpage%2B%25281%2529.png" 
width="452" /></a></div>
3. Simple horizontal error page
404 error page
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-LXUlX0S3K1g/WmIqrhXQ8nI/AAAAAAAACdE/FBiDpM4uFK0CB8I_C2CotDv
nZ7GelFCRwCLcBGAs/s1600/error%2B%25281%2529.png" 
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img 
border="0" data-original-height="315" data-original-width="560" 
height="360" src="https://4.bp.blogspot.com/-
LXUlX0S3K1g/WmIqrhXQ8nI/AAAAAAAACdE/FBiDpM4uFK0CB8I_C2CotDv
nZ7GelFCRwCLcBGAs/s640/error%2B%25281%2529.png" width="640" 
/></a></div>
For more free custom 404 error pages, check out this post.


Conclusion
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.

No comments