404 error page is the page that will be displayed when the actual page is not found . Till now Blogger’s error page was a plain old design with more of orange in it and was not customizable. Now Blogger Error pages use the same template as what you use for your Blog. This tutorial will help you in setting up a Custom 404 page for your Blog.
By Default, your Blogger Error page will display this error message
You can Change this message to something else from the Blogger Settings.
The option is there at Settings > Search preferences > Custom Page not Found
If you want more than just a message, then we will have to fill up this text area with some HTML Code. This is how my Error page Looks like
Instructions
- Login to your Blogger account and go to the Template page and proceed to Edit HTML
- Now Click somewhere within the Blogger Template Editor and search for </head>
and immediately before that paste this snippet
<b:if cond='data:blog.pageType == "error_page"'> <style type="text/css"> .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; } </style> </b:if>
This code snippet will reset the default styling given to the Blogger Message Wrapper.
- Save the template by clicking on the Save Template button and go to a page on your blog which doesn’t exist.
- You should be able to see the change now. The grey background and the border around the 404 status message would no longer be there.
- Now Let’s see how we can improve the look and feel of our 404 page. I would suggest you to use inline CSS styles to improve the look and Feel of your 404 message.Here is a sample HTML template which you can paste into the text box at Search preferences > Custom Page not Found.
<h3>Your requested page was not found</h3> <p>Sorry, we cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.<br/> Please check that the Web site address is spelled correctly.</p> <b>Other things to try:</b><br/> <ul> <li>Go to our <a href="/">home page</a>, and use the menus or links to navigate to a specific post.</li> <li> <form method="get" action="/search"> <table width="100%"> <tr> <td><input type="text" style="width:95%;padding:2px;" value="Search this blog.." onfocus="if (this.value == "Search this blog..") {this.value = ""}" onblur="if (this.value == "") {this.value = "Search this blog...";}" name="q"></td> <td><input type="button" Value="Search"></td> </tr> </table> </form> </li> </ul>
- It will give you something similar to my 404 page.
- If you are creative, you can add more stuff to the 404 pages.
Detecting an Error Page
Blogger has introduced a new page type called "error_page" and you can detect it using b:if conditional tags.
The following condition checks if a page is an error page or not.
<b:if cond='data:blog.pageType == "error_page"'> This is an Error Page </b:if>
Changing the Error Page Title
By default the title of the Blogger Error Page is your Blog Title. If you want to change it to something else, you can Edit your template and change
<title><data:blog.pageTitle/></title>to
<b:if cond='data:blog.pageType == "error_page"'> <title>Page Not Found</title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>
If you are using my Title Tag Hack or derivatives of that available on the internet, then you will have to change
<!-- Start www.bloggerplugins.org: Changing the Blogger Title Tag --> <b:if cond='data:blog.url == data:blog.homepageUrl'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title> </b:if> <!-- End www.bloggerplugins.org: Changing the Blogger Title Tag –>
to
<!-- Start www.bloggerplugins.org: Changing the Blogger Title Tag --> <b:if cond='data:blog.url == data:blog.homepageUrl'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType == "error_page"'> <title>Page Not Found</title> <b:else/> <title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title> </b:if> </b:if> <!-- End www.bloggerplugins.org: Changing the Blogger Title Tag –>
As I always say, if you get into troubles, you can use the comment form , Forum or our Facebook Wall :)
I’m sure that this is the first tutorial on Blogger 404 Pages on the Internet. Do share and keep us live :D
I have problem with changing error page title
ReplyDeletegreat, thanks for sharing
ReplyDelete@Arham - well you are using my Title Tag Hack or derivatives of that available on the internet.
ReplyDeleteI have updated the post :D
Thanks master :)
DeleteHi Blogger Plugins, I followed your instruction and my result is, the title Page not found appear but there's no text 404 Opps... , how to fix this error. Thanks for help
ReplyDeleteBut what about editing robots.txt ? Don't tell us how to make correct robots.txt ?
ReplyDeleteIt's not working
ReplyDeleteThere are 2x
ReplyDeleteand 2x
Ah if there are these codes 2 times you have to change both
ReplyDelete@Blogger Plugins
ReplyDeleteI've a Customized Template for my blog & i've Deleted the status message completely and NOW i don't know where to put this TAG!
b:include data='top' name='status-message'/>
Blogger keeps returning errors, please tell me where should i add the STATUS MESSAGE...
Thank you BP!
ReplyDeletei've Resolved my issue :)
great tutorial, thanks for it,
ReplyDelete[OOT].......
ReplyDeleteCan you post "HOW TO ADD Page Intro In blogspot.."
Thanks for it...
We can add CSS code and content through Custom Page not found option. Blogger is allowing 10k words. So the space is plenty. We can add javascript, CSS and HTML here. This is my 404 page. http://www.bloggerhow.com/404
ReplyDeleteyea you are right. Restyling the Message Wrapper and filling the text area with the HTML code is the best way to get this done.
Deletefinally found something useful!
ReplyDeletecan you help me in error page, its not working for my site!!
ReplyDeleteLove this update Blogger Plugins :)
ReplyDeleteha ha it is working for my blog now...
ReplyDeletethank you friend.
hey! see my blog .. 404 not found with auto search google with the keywords http://goo.gl/RyPxe
ReplyDeleteI can't get this work.
ReplyDeleteThe error page shows up but it looks like a label page with no posts.
I pasted your text into the text box but all is visible in the box is:
"These are the posts in the required category."
Could you please help me out?
Many thanks.
hi BP,
ReplyDeleteIm using the code dynamic Title tag as you suggested, but I find a problem: when clicking OlderPosts in my Homepage, the title of those page will appear the sames as the url of them, ex: myblog.com/search?ddfffakjf... so do you have any idea how to fix this. Thanks
Thanks for this great tutorial BP!
ReplyDeleteTankx !
ReplyDeleteTy, works for me! Great hack btw. xx
ReplyDeleteI get this message:
ReplyDeleteYour template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The string "--" is not permitted within comments.
Every time I try to change the Title Tag Hack. I suppose it is because this code: But why can't I change it? I try to change the " into "
Any solution?
@Tim - If you want to post codes in the comment form, you will have to escape it. Or use my Facebook Page or the forum.
Deletei would have loved it if you havn't just shown the text but a full customized page. like a proper designed page... and its very easy like uploading a simple pic..
ReplyDeleteBlogger Page not found message not display....
ReplyDeleteGreat tip. I did everything right except the title thing. But somehow I managed now. Things look settle on my blog now. Thanks!
ReplyDeleteCan I change the order posts are in now?
ReplyDeleteCan I keep 1 post as the first one on the list?
Thans.
it is nice one because there are most of the broken links in my other blogs and custom error page will somehow show professionalism ,i mean at least user will see that admin of this blog knows about broken links and the good thing about this blogger twik is it is automated.going to install according to your directions in my blog.thanks for ahring.
ReplyDeleteIts not working for me.. need more details about XML langauge
ReplyDeletePlease help me! how to fix this issue: The string "--" is not permitted within comments
ReplyDeleteyou can email me at : muhammadubaidghauri@gmail.com : please mail how to fix this issue: The string "--" is not permitted within comments
ReplyDeletelove it + happy blogger = thanks so much :D
ReplyDeletemy title wasn't changing, how to fix it?? (andry5ury4.blogspot.com/404)
ReplyDeleteno message nothing on my error pages how to fix please help.
ReplyDeleteurl is http://homeoresearch.blogspot.com/