Beautiful Custom 404 Error Page For Blogger

Blogger has given an option to setup 404 error page in march 2012. It was long awaited features expected by bloggers. In a simple term we can define 404 error is a web page that show up when a visitor clicks on the broken link and it tell the visitor that the link he clicked is not available in the blog.

In default 404 error page in the blogger show only the text like "Sorry, the page you were looking fore in this blog does not exist." That look is not much attractive.In this custom error page design include a link that drop to home page of your blog with an awesome design.

Live Demo
 

How To Add To Blogger

1. Goto Blogger > Select your blog > Template > Edit HTML.
2. Add the following code before  </body>  .

<b:if cond="data:blog.pageType == &quot;error_page&quot;">
<style>
#error-not-found {
    background: #ff0000;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisbVD1gO5dlAwkEt1o2u2caI9NjfQelgCT3ZENz1Dcnj1i3hhDqyQQH02bGozBiHu-HzlmjKYZIKaWGSr3ffpCr_k2HmLX22U7UhT51rutfApwAlXyQIMmpkKjo7fXjSoY_cTq9f0RboA/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisbVD1gO5dlAwkEt1o2u2caI9NjfQelgCT3ZENz1Dcnj1i3hhDqyQQH02bGozBiHu-HzlmjKYZIKaWGSr3ffpCr_k2HmLX22U7UhT51rutfApwAlXyQIMmpkKjo7fXjSoY_cTq9f0RboA/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>

3. Save it. That's it.

Hope you like this custom 404 error page design.

SHARE

Tweet