How to Add beautiful 404 Page in Blogger ~ Cool Blogger Tricks

So In this post I'll tell you how to add professional 404 error page for blogger. Professional 404 page give you a responsive look to your blog and Make your blog professional also. Adding 404 page in blogger is very easy. So lets start hoe to add 404 page in blogger.
What is 404 page :
First of all you learn what is 404 page and why we see 404 page in our blog. Broken links and the page which is not exists in our blog is 404 page. By default in blogger we see a page with blank posts area for 404 page but we want to add professional 404 page for blogger.
Demo
Every one want a demo page for every 404 page that how their blog 404 page appear. So you can see demo page of this 404 page here

Live Demo

How to customize 404 page

We can easily customize 404 blog in blogger.

Just go to blogger dashboard and select your blog which you want to change.
Then go to Settings >> Search Preferences >> Errors and Redirection
Select Edit Option for "Custom Page Not Found"

Here you can add custom CSS and HTML as your need 404 page. If you are newbie or not know about developing just use the code which I give to you.
Features of This 404 page
Some features are included in this 404 page.
Full-Width : The 404 page is full width and when some user reach to 404 page then he see full with 404 page as you see in the demo.
Home Page Link : A home page link is added to redirect your visitor to the home page if he/she did not find the post which they are looking for.
Beautiful Background : A beautiful background is added to the 404 page.

Add 404 page in blogger

Just go to blogger dashboard and select your blog which you want to change.
Then go to Template >> Edit HTML
Add the following code just above the </body> tag.

<!– CBT 404 Page Error Start –>
     <b:if cond='data:blog.pageType == "error_page"'>
    <style>
    #error-not-found {
        background: #ff0000;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguSYriENkDzZf272_K3Mh2L58nyxxpHdomhyCnjKZvSQSQAxTyP3iXHWfLxVdHROtSGFcDdKn-dLhMjhWt1eRaq5uhpOWZyJrciNftaZBT8WMC4HOr4bWejmp3kJtKQJlphLE2EhB7XSA/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/AVvXsEguSYriENkDzZf272_K3Mh2L58nyxxpHdomhyCnjKZvSQSQAxTyP3iXHWfLxVdHROtSGFcDdKn-dLhMjhWt1eRaq5uhpOWZyJrciNftaZBT8WMC4HOr4bWejmp3kJtKQJlphLE2EhB7XSA/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.... The Page You are looking for</h2>
      <h2>Not Found</h2><br/>
     <p> <a href='/' title='home page'> Back To Home page</a></p>
    </div>
    </b:if>
<!– CBT 404 Page Error End –>

Save your template and you are Done :)
How to check your 404 page
You can easily check your 404 page. just visit your blog as it is
http://yourblog.blogspot.com/404
you'll see beautiful 404 page.

Final Words :
We hope that you'll like this 404 page for your blog and use this on your blog. If you need more help then comment below.

Get Free Updates in your Inbox