How to Create a Custom 404 Page in Blogger
A 404 page appears when someone tries to visit a page on your Blogger site that doesn’t exist. This might happen due to a broken link or if someone mistypes a URL. By default, Blogger shows a boring 404 error. But you can create a custom 404 page to make it look beautiful, helpful, and more on-brand.
In this guide, you’ll learn how to create and add a custom 404 page to your Blogger website using simple Code snippet.
Why Should You Create a Custom 404 Page?
A custom 404 page:
- Makes your site look professional.
- Helps visitors stay on your website longer.
- Can guide users to helpful content instead of losing them.
- Improves user experience (UX) and SEO.
How to Add a Custom 404 Page in Blogger
For this, You need to search for existing 404 code in your blogger template and replace that with the following code.
<b:if cond='data:blog.pageType == "error_page"'>
<style>
.custom-404-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 90vh;
flex-direction: column;
text-align: center;
padding: 20px;
font-family: 'Segoe UI', sans-serif;
color: #333;
box-sizing: border-box;
}
.custom-404-wrapper img {
max-width: 300px;
width: 100%;
height: auto;
margin-bottom: 20px;
animation: float 2.5s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.custom-404-wrapper h1 {
font-size: 2.4rem;
color: #ff4c60;
margin: 0 0 1rem;
line-height: 1;
}
.custom-404-wrapper p {
font-size: 1.1rem;
margin-bottom: 1.5rem;
max-width: 600px;
line-height: 1.6;
}
.custom-404-wrapper a {
font-size: 1rem;
padding: 0.8rem 1.5rem;
background: #ff4c60;
color: #fff;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s;
}
.custom-404-wrapper a:hover {
background-color: #e03e51;
}
</style>
<div class="custom-404-wrapper">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVSn_X5v3L5IynA4rPajDcCwp9pIQN0MD0y5mj8XJHLNRSKp7eG98Lq9m5CHjUZWcusuzHT64_2nVvlMjIV2kwflJXSxzg-Rdh8jdneZjfsQ4Xn3_NnLz3CJoVMsEphC5cRgpNvH64LzGemC8Eor8JwdN5zLVQq5Q0RL-rG38HfNhoHLsSKNDfIZGbzsTb/s16000/404%20error%20lost%20in%20space-rafiki.png" alt="Lost in 404" />
<h1>404 - You're Lost in Space </h1>
<p>Oops! This page has drifted off course.<br/>But no worries, we can get you back.</p>
<a href="/">🚀 Back to Earth (Home)</a>
</div>
</b:if>FAQs
Conclusion
Creating a custom 404 page in Blogger is super easy and can make a big difference. It improves your site’s design, user experience, and keeps people engaged.
So don’t ignore the 404 page — use it as an opportunity!
