"The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested." In simple words the page that will be displayed when the actual page is not found is called a 404 Error Page. 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 . This would help template designers in making up custom 404 Pages.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 replace this entire block with something much better. 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
- Click on the Expand Widget Templates Check box so that your entire template comes up
- Now Look for all occurrences of
<b:include data='top' name='status-message'/>
and replace it with<b:if cond='data:blog.pageType == "error_page"'> <b:include name='404-block'/> <b:else/> <b:include data='top' name='status-message'/> </b:if>
- Now find this
<b:includable id='status-message'>
and immediately above that paste the following code snippet<b:includable id='404-block'> <div id='custom-404-block'> <h2>404</h2> <div>Oops… Page Not Found!</div> </div> </b:includable>
- Save the template and go to a page on your blog which doesn’t exist.
- You should be able to see the change now.Now It’s time to spice up this page with some CSS definitions.To do that Go to Template > Customize (Template Designer). Under the Advanced option, you will see an option to add CSS. Append these CSS rules there and Apply it to your Blog.
#custom-404-block{ color:grey; font-size:50px } #custom-404-block h2{ color:grey; font-size:120px; text-align: center ; } - That’s it. Now you should have an awesome 404 page :D
- If you are creative, you can add more stuff to the 404 pages. You can find a list of really creative 404 pages on HongKiat for inspiration
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>
You must have noticed that we are using a similar b:if construct in the code mentioned in the above tutorial.
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
bloggerplugins.org
Post a Comment
♦ Guests can send comments by choosing Comments Anonymous (for guests).