How To Set A Custom Page Not Found Error On Blogger - And Redirect It To Your Homepage

How To Set A Custom Page Not Found Error On Blogger - And Redirect It To Your Homepage

Blogger has the option to set a custom page not found message and redirect (if needed). For my personal blog I decided not to only add a small message whenever a user misspells any links (or if I delete older posts) but also to redirect them to my blog's homepage.

Follow the below easy steps and you're good to go:
Access your blogger draft and go to "Search preferences". Under "Error and redirections" you'll see the "Custom Page Not Found" option > click on Edit.
Copy and paste the below code:

<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: #FA4C29; 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> <h2 class="large-heading" style="text-align: center;">Page not found.</h2>
<h3 class="light-heading" style="text-align: center;">Sorry, the page you were looking for on this blog does not exist.<br>You will be redirected shortly to the homepage.</h3>
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 5000);
</script>

The user will be presented with the above message and he will be automatically redirected to your homepage - after a 10 seconds delay time. Feel free to change the code as you wish.