Having a custom 404 error page on your blog gives it a professional touch, ensuring users do not get annoyed or have a bad impression when they land on a missing page.
We've all encountered a 404 error page – it's the dreaded message that tells us the page we're looking for doesn't exist. This HTTP standard code indicates that while the server is reachable, it can't find the requested page. On Blogger, the default 404 error message, "Sorry, the page you were looking for in this blog does not exist," can look quite odd and unprofessional.
A custom 404 error page can significantly enhance your blog's user experience. Instead of the default message, you can guide users back to your homepage or provide them with other useful links, ensuring they stay engaged with your content.
Setting up a custom 404 error page on Blogger is a simple process that can make a big difference in how your site is perceived.
In this guide, we'll walk you through the steps to create a stylish and effective 404 error page for your Blogger blog. We'll cover everything from accessing your HTML template to customizing the CSS and HTML to match your blog's design.
Follow along to give your blog a professional edge and keep your visitors happy, even when they stumble upon a broken link.
Benefits of a Custom 404 Error Page
Creating a custom 404 error page for your blog comes with several advantages that go beyond just aesthetics.
Professional Appearance
A custom 404 page reflects a higher level of professionalism and care for your site's user experience.
When visitors encounter a thoughtfully designed error page, it reassures them that they are on a well-maintained site. This small detail can significantly impact how your audience perceives your blog.
Improved User Experience
Instead of facing a dead-end, users are guided to continue exploring your site.
A custom 404 page can include helpful links to your homepage, popular articles, or a search bar, ensuring that visitors don't leave your site frustrated. This keeps them engaged and reduces bounce rates.
Potential SEO Benefits
While 404 pages themselves don't directly impact SEO, a custom page can indirectly benefit your site’s performance.
By reducing bounce rates and improving user experience, you send positive signals to search engines about your site's quality. This can contribute to better search rankings over time.
Overall, a custom 404 error page is a simple yet powerful tool to enhance your blog’s usability and credibility.
Make sure to implement a custom 404 page to keep your visitors happy and engaged.
Steps to Set Up a Custom 404 Error Page on Blogger
Step 1: Accessing the HTML Template
The first step in creating a custom 404 error page is to access your blog's HTML template.
Go to Blogger → Template → Edit HTML
Step 2: Adding CSS Code
To style your custom 404 error page, you need to add specific CSS code to your template. Start by locating the following code in your HTML template:
]]></b:skin>
Click anywhere inside the template code box and press Cmd+f (Mac) or Ctrl+f (Windows) to search for the code.
After locating the code, paste the following CSS code just below it:
<b:if cond='data:blog.pageType == "error_page"'> <style>
#main-wrapper {
width: 100%;
}
#sidebar-wrapper,
.blog-pager {
display: none !important;
}
#content-wrapper {
width: 99%!important;
}
.status-msg-wrap {
font-size: 100%;
margin: none;
position: static;
width: 100%;
}
.status-msg-border {
display: none
}
.status-msg-body {
padding: none;
position: static;
text-align: inherit;
width: 100%;
z-index: auto;
}
.status-msg-wrap a {
padding: none;
text-decoration: inherit;
}
#TB-404-error-box {
background: #FFFFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5e26EEP8xj8q7h-bkJGgCQsH_hC_5E-7pFQRLdvPDEmfNyAQsn84YujIIifChYAphECvTOiMa5amcBEUuIZpM1_Hc4BJIQwVpNR7guDE09KnLh5OSXVJGEKb6FyU7Bz_-eEPMW-UJa8E/s1600/TB-Error-Page.png") no-repeat scroll 0% 95% rgb(255, 255, 255);
width: 97%;
margin: 0px 0px;
padding: 15px 20px 50px 20px;
border: 1px solid #E7E7E7;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 2px;
height: 470px;
}
</style></b:if>
Step 3: Adjusting Static Code
Ensure the CSS code matches the IDs and classes used in your template. If your template uses different IDs or classes, update the CSS code accordingly.
Note: The provided static code may not work if your template does not use the same ID or class names. Verify your template's code and make necessary adjustments.
You can also customize the background image and color of your error page:
Background Image: You can change the image URL in the CSS code above to your own image URL or one provided below. Ensure the image size is 990x140 pixels and adjust the percentage value for proper fitting.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5e26EEP8xj8q7h-bkJGgCQsH_hC_5E-7pFQRLdvPDEmfNyAQsn84YujIIifChYAphECvTOiMa5amcBEUuIZpM1_Hc4BJIQwVpNR7guDE09KnLh5OSXVJGEKb6FyU7Bz_-eEPMW-UJa8E/s1600/TB-Error-Page.png
Background Color: You can also change the #FFFFFF color code to your desired background color.
Updating Search Preferences
Step 4: Custom Page Not Found Settings
To fully implement your custom 404 error page, you need to update the search preferences settings in Blogger.
Navigate to Settings → Search Preferences. Under the "Errors and redirections" section, find "Custom Page Not Found" and click Edit.
This step ensures that your custom 404 error page is displayed whenever a user encounters a broken link or non-existent page on your blog.
Paste the following HTML code inside the box provided. This code creates a user-friendly and informative 404 error page:
<div id='TB-404-error-box'>
<p align="center"><font color="#ff0000" style="font-size: 57px;"><strong>Oops!</strong></font></p>
</br><p><center><font color="#000">Seems like you either clicked a <div style="color: #0089D6; font-size: 27px;">Broken Link</div> <b>or a Page that no longer exist. Kindly do one of the followings:</b></font></center></p><div style="line-height: 25px; font-weight:normal;"><center><b>✔</b> <a href='javascript:history.go(-1)'>« Go Back</a>!</br><b>✔</b> Help us to Serve you better by <a href='http://learntricking.blogspot.com/p/contact-us.html'>Reporting This Problem</a> to us!</br><b>✔</b> Go to <a href='http://learntricking.blogspot.com'>Homepage Address</a>!<br/></center></div><p><br/></p><p align="center"><font color="#08C500" style="font-size: 100px;"><strong>404</strong></font></p><p align='center'><font color="#EB0F0F" style="font-size: 20px;">Page Not Found!</font></p> </div>
Final Adjustments and Testing
Step 5: Linking and Styling
To complete the setup of your custom 404 error page, you need to replace example links with your own and adjust the styling to match your blog’s design.
In the HTML code provided earlier, locate the following placeholders and replace them with your own URLs:
- Contact Us Link: Replace
http://learntricking.blogspot.com/p/contact-us.htmlwith your contact page URL. - Homepage Address Link: Replace
http://learntricking.blogspot.comwith your homepage URL.
Ensure you carefully check all links to avoid broken links on your custom 404 page.
Additionally, you can adjust the text color, size, and other styling elements to better fit your blog’s overall design. Use the inline CSS provided in the HTML code to make these adjustments.
Example of Styling Adjustments:To change the font size of the error message, locate the following line in the HTML code:
<font color="#ff0000" style="font-size: 57px;"><strong>Oops!</strong></font>
Modify the font-size: 57px; value to your preferred size.
Testing Your Custom 404 Error Page
Once you've made all the necessary adjustments, it's crucial to test your custom 404 error page to ensure it functions correctly.
- Visit your blog and intentionally enter a non-existent URL to trigger the 404 error page.
- Check that all links on the custom 404 page work correctly and lead to the intended pages.
- Verify that the styling matches your blog's overall design and that the page displays correctly on different devices and browsers.
If you encounter any issues during testing, double-check the HTML and CSS code for any errors or missing elements.
By thoroughly testing your custom 404 error page, you ensure a seamless user experience even when users encounter broken links.
Additional Tips for a Great 404 Error Page
Keep It Simple and Clear
A good 404 error page should be straightforward and easy to understand.
Avoid overwhelming users with too much information. Instead, provide a clear message that the page they're looking for cannot be found, along with options to navigate back to your homepage or other important sections of your site.
Add a Search Bar
Including a search bar on your 404 error page allows users to quickly find the content they're looking for.
This can significantly improve user experience by providing an easy way for visitors to search for information without having to navigate away from the error page.
Use Humorous or Friendly Language
A touch of humor or a friendly tone can make the experience of landing on a 404 error page less frustrating for users.
Consider adding a light-hearted message or an engaging graphic to your error page to keep the mood positive and encourage users to continue exploring your site.
Highlight Popular Content
Use your 404 error page to showcase some of your most popular or recent blog posts.
This can help guide users towards interesting content they might not have seen before and keep them engaged with your site.
Remember, the goal of a custom 404 error page is to enhance user experience and keep visitors engaged with your blog.
Interested in learning web development? Check out our recommended program, Quick Start to Web Development with HTML, CSS, and JavaScript.
Stay Up-to-Date
Regularly check and update your 404 error page to ensure all links and information remain current.
As your blog evolves, you might need to update the links and content on your error page to reflect new posts, changes in structure, or updates in your affiliate programs.
Keeping your 404 error page updated helps maintain a professional and user-friendly experience.
Final Words and Support
Ask for Feedback
Encourage your readers to provide feedback on your 404 error page. This can help you identify any issues or areas for improvement that you might have missed.
User feedback is invaluable for continuously improving the user experience on your blog.
Offer Help and Contact Options
Make it easy for users to reach out if they encounter issues with your site. Include a link to your contact page or an email address on your 404 error page.
For example:
"If you're having trouble finding what you're looking for, please contact us for assistance."
Providing a way for users to get help can reduce frustration and increase user satisfaction.
Encourage Subscriptions
Use your 404 error page as an opportunity to encourage visitors to subscribe to your blog. This can help you stay connected with your audience and keep them updated on new content.
You might include a simple subscription form or a call-to-action, such as:
"Stay updated with our latest posts and tips! Subscribe to our newsletter."
Promote Social Media
Directing users to your social media profiles from your 404 error page can help increase your followers and keep your audience engaged across different platforms.
For example:
"Follow us on social media for the latest updates and tips: Facebook, Twitter, Instagram."
Need Assistance?
If you encounter any difficulties while setting up your custom 404 error page, don't hesitate to ask for help. You can reach out in the comments section below or contact us directly for personalized support.
We're here to help you create a professional and user-friendly blog.
Stay Safe and Happy Blogging!
We hope this guide helps you create an effective custom 404 error page for your Blogger blog. By following these steps and incorporating the tips provided, you'll enhance the user experience and maintain a professional appearance for your site.
Share this post to show your love and help others improve their blogs too. Stay safe and happy blogging!
