How To Add 404 Error Page In Blogger

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.

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 == &quot;error_page&quot;">
<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.