Easiest Way to Create Professional 404 Error Page for Blogger; Without CSS Coding!
Generally, 404 error code will not affect your overall search ranking and SEO. But, it’s really a bad experience for your readers when they saw an empty page with 404 error code after landing with wrong URLs from somewhere. Although, Blogger has its own option to set a custom 404 error page but, it looks very old and ugly (status message will be displayed in a default gray box)!
Now, if you’re using the ”Google Blogger” platform for a professional blogging purpose, then you also need to give your 404 error pages a professional look. You can find hundreds of CSS codes for your professional 404 error page from different of sources. But, as a professional blogger, you should avoid using third party codes in your blog. Not only that, sometime using excess CSS codes might reduce your page speed and its definitely harm SEO.
How to Create Professional 404 Page Without External CSS code;
This tutorial will show- how to create a super flexible custom professional 404 error page for Google Blogger without using any third party CSS style sheets. Just follow the steps below-
No#1. Configure your 404 error page: Go to Blogger Dashboard and click “New Post”. Now, write everything what you want to display in your 404 error page exactly like how you write a blog post. You can also put some exciting picture, videos, etc. This will make the page more professional.
See the Demo! This will give you an Idea!
No#2. Set The Error Page: After completing the 404 error page configuration, go to the HTML mode of your post and copy the whole code and paste it somewhere in a notepad. Now, go to the Setting >> Search preferences and click edit- ”Custom Page Not Found” option under Errors and redirection section.
Now, paste the whole code from your notepad and hit the “Save Changes” button.
That’s all for setting your custom 404 error page. But, still the page will look ugly (will appear under a default gray box). So, next you need to give it a professional look.
No#3. Make it Professional: The standard of your 404 error page will also depends on the contents you provided to your users, not only on designing! You just need to remove the default ugly gray background and border to give it a professional look. To do this follow the steps below-
- Go to the Template >> Backup your blog.
- Now click- Edit HTML.
- Search for the code- use Ctrl+F
<b:if cond='data:navMessage'> - Now you can see two codes like this, just below 3 or 4 line down-
<div class='status-msg-border'>
<div class='status-msg-bg'> - Just delete those two (highlighted with green color) codes along with associate ”div” tags. Here- ”status-msg-border” responsible for border and “status-msg-bg” responsible for background of Blogger’s default error page style. See the picture demonstration. Finally. hit the “Save template” button.
Now check your 404 error page by typing a wrong URL of your blog like- http://yourblog.blogspot.com/imwrong
That’s all. Now you have just got an own exciting professional 404 error page for your blogger blog.
Note: Here I’ve used the Google Feed burner email subscription box in my error page (see the demo again). You can also put your own by just copying the HTML email subscription box code from FeedBuner >> Publicize >> Email subscription management.
Don’t forget to delete the post you’ve created for error 404 page set-up after completing the whole process.
If you have any question, please use the comment section below!
Related Posts:
© copyright 2018 – All rights reserved