How To Add 404 Error (Page Not Found) Page in Blogger

404 error page is the page that will be displayed when the actual page is not found on website. By Default, your Blogger Error page will display this error message.

"Sorry, the page you were looking for in this blog does not exist."

This post will help you in setting up a Custom stylish 404 error page for your Blog. You may have seen lots of 404 error pages of different designs and images but this is very stylish and and made up of no image, It looks professional.

Add a custom 404 Page Not Found message to your blog, is one of the new features introduced into Blogger blogs. A Customized 404 page allows you to easily guide your blog readers on how to navigate or link back to your blog should in case the blog reader navigates to a broken link on your blog.

Many users want to change it's own custom 404 page not found message that catches the readers attention and that leads them back to the homepage naturally. Plus, custom 404 messages gives a site a more professional look as well.

How To Add 404 Error (Page Not Found) Page in Blogger

1. Log in to your Blogger account.

2. Now go to Settings section and choose Search Preferences.

3. On the right side of the page, you will see Custom Page Not Found underneath Errors and redirections option and click Edit.

4. When you click on the Edit button, the Edit box will open. Now Just copy and paste below code in this box and click save.

<style type="text/css"> #error-404 { border: 20px solid #1B1B1B; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #d81111; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; } </style> <div id="error-404"> <span>404</span>

</div> <h1 class="large-heading" style="text-align: center;">Page not found.</h1> <h2 class="light-heading" style="text-align: center;">Sorry, the page you were looking for in this blog does not exist.</h2>