One
of the Most Exiting Feature was "404 Page Error" Redirection. "The 404
or Not Found Message" Might you have Seem Them On Many Websites or Blogs
While Browsing. The "404
Error" is a simple HTTP standard response code that appears only when a
broken link is clicked and it gives response to the user that the page he/she
clicked no more exits or is deleted. Another reason behind this 404 error is
change in URL structure due to which server do not respond to your requests
properly.
Blogger gives you
default “404 error page” in plain text along with HTML tags inside the "Custom Page Not Found" input box
using Search Preference option. Which is really frustrating and boring and
might also result in the visitors never come back again therefore here we
required a great looking “404 Error Page” to make our blogs even more
attractive and beautiful. So here In this tutorial will help you out in setting
up cool looking Custom “404 Error Page” for your blogs. Firstly have a
screenshot of the 404 Error page below.
- Must Read : How To Start a Blog on Blogger "Ultimate Guide"
What is 404 Error Page ?
It is a web
page which is being used by all websites to show the error when someone
enters into a broken or not found location. In other words, when you
enter an incorrect address then that page appears. Basically, In that
page the error message and some options are added for better navigation.
Why 404 Error Is Displaying ?
The
404 errors are arising because of the page requested is not found.
Before introducing this feature, Blogger was showing a default error
page which was not customizable. It was same for every Blogger user.
How Customize Your Own 404 Page ?
It is now simple. You can set your content in Search Preferences in Settings. Under Errors and Redirection, select Edit option of Custom Page Found. Here you can enter The content.
How To Design a 404 Error Page ?
404
error page content uses the same style of status messages. In order to
change the appearances, we need to add some CSS3 codes with content.
Important CSS3 classes are below. It is easy to edit, no need of
knowledge in CSS3.
How To Add 404 Error Page ?
- Goto Blogger > Select your blog > Template > Edit HTML.
- Add the following code before </body>
<b:if cond="data:blog.pageType == "error_page"">
<style>
#error-not-found {
background: #ff0000;
background: url(http://4.bp.blogspot.com/--Ri7FNhfPuU/T3p0_rWUvLI/AAAAAAAAHzU/v_V5cF2O9YM/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);
background: url(http://4.bp.blogspot.com/--Ri7FNhfPuU/T3p0_rWUvLI/AAAAAAAAHzU/v_V5cF2O9YM/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0, center 40%, 800, from(#ff0000), to(#880000) );
text-align:center;
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
padding-top:270px;
z-index:999999;
}
#error-not-found h1 {
font-size:640px!important;
position:absolute;
font-family:impact,sans serif!important;
top:70px;
left:50%;
letter-spacing: -8px;
margin-left:-502px!important;
width:960px;
z-index:-2;
color:rgba(0,0,0,.09)!important;
}
#error-not-found h2 {
font-family:arial black,sans serif!important;
text-transform:uppercase;
font-size:81px;
line-height:66px!important;
letter-spacing: -3px;
color:#fff!important;
margin:0!important;
padding:0!important;
}
#error-not-found p a,
#error-not-found p a:visited,
#error-not-found p a:hover{
font-family:arial black,sans serif!important;
text-transform:uppercase;
font-size:56px;
line-height:40px!important;
border:none;
font-weight: bold;
color:rgba(0,0,0,.5)!important;
margin:0!important;
padding:0!important;
text-decoration:none!important;
}
</style>
<div id="error-not-found">
<h1>404</h1> <h2>Ops..sorry</h2>
<h2>Page Not Found</h2>
<p> <a title="home page" href="/"> Back To Home page</a></p>
</div>
</b:if>
- Save it. That's it.
From The Editor's Desk
So Friend, I
Know this Beautiful and Professional 404 Page Error Is Help Full For
Gain More Visitors I Spent My 5 Hours To Write This Article Any Problem
Then Comment Me.
