Hello everyone, I'm here to teach you how to put a custom 404 error in blogger and how to change its design to make your blog more engaging and look nice.

Before we get started, let's first discuss what is a 404 error? and how to put and use it in your own themes.

What exactly is a 404 error?

• A custom 404 error page is a tailored webpage that displays when a user tries to access a page on your site that does not exist. Instead of the generic, unbranded "404 Not Found" message from the server, a custom 404 page is designed to improve the user experience by matching your site's overall look and feel.

What is a custom error 404 page used for?

• A custom 404 page is used to improve the experience for website visitors when they mistype a URL or land on a page that no longer exists. Instead of displaying a generic, ugly message from the server, the website will display a page that is purposefully crafted to match the site's design and branding.

Steps to set a custom 404 error

1. Blogger:
   • Go to the menu click "themes", click the Drop Menu and click Backup Once you have backed up, click Edit HTML.
2. Set Up
   • and once you're inside the HTML just look for <b:if cond='data:view.isError'> and once you find it, just copy this code and copy paste it there like in the picture, The code is below.

   <article class='custom-error'>
<style>
                  .custom-error{text-align:center;padding:25px;background:white;}
                  .custom-error h2{font-size:calc(80px + 10vw);line-height: 1;color:hsl(30, 5%, 30%);}
                  .custom-error h3{font-weight:bold;color:hsl(30, 5%, 30%);}
                  .custom-error p{color:hsl(30, 5%, 50%);margin:10px 0 20px 0;}
                  .custom-error a{padding:8px 12px;display:inline-block;color:white;background:#222222;}
                  .custom-error a:hover{background:#222222;color:white;}
                </style>
<h2>404</h2>
<h3>This Page is Not Found!</h3>
<p>Maybe the URL is incorrect, or This page no longer exist.</p>
<a href='/'>GO TO HOME</a>
        </article>     
      </b:if>

• if you can't find it <b:if cond='data:view.isError'>,Just copy and paste this code like in the picture.

      <b:if cond='data:view.isError'>
<article class='custom-error'>
<style>
                  .custom-error{text-align:center;padding:25px;background:white;}
                  .custom-error h2{font-size:calc(80px + 10vw);line-height: 1;color:hsl(30, 5%, 30%);}
                  .custom-error h3{font-weight:bold;color:hsl(30, 5%, 30%);}
                  .custom-error p{color:hsl(30, 5%, 50%);margin:10px 0 20px 0;}
                  .custom-error a{padding:8px 12px;display:inline-block;color:white;background:#222222;}
                  .custom-error a:hover{background:#222222;color:white;}
                </style>
<h2>404</h2>
<h3>This Page is Not Found!</h3>
<p>Maybe the URL is incorrect, or This page no longer exist.</p>
<a href='/'>GO TO HOME</a>
        </article>     
      </b:if>

when If you've already put it in, that's okay. I hope I was able to help you by putting a custom error 404 on your blog. If you want something like this, don't be shy to comment and if you have any questions and if you have any problems about our page, you can talk to me through the comment section or this Contact Us, thank you very much.