Home » » Add a Custom 404 Page Not Found for Blogger

Add a Custom 404 Page Not Found for Blogger





In this post i will teach How to enable custom 404 Error page for blogger. This SEO custom 404 page appears only when a reader visit a page that does not exist or deleted.In the past with old Blogger interface we're unable to create a custom error page but now it's possible because now that option is also available in search preferences settings.You can create a custom error page as per your blog design and creativity.Those who don't know about 404 Error page can read the below post to understand it.






Follow this step :
Go to Blogger → Setting → Search Preference


Follow this step :





Now under Error and redirections you can find Custom Page Not Found. 
Click on edit option.







Now a box will appear,In the box paste the bellow code.


<style>
#error-page {
    background: #007dbd;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimf9KNtqQDNW5gVSWNXQMzwjivXBz-kAKnIuLaSQeYQuLBO5us6nC8XUArqNOXI0jipbSPOVnZLiyDLPastZE0S8BJUgcieA3AGZuAsnjJt96z566PqTgQT419iXdDclPZyxi8n3YtLk4/s1600/nbw404.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #007dbd 0%, #003650 100%);
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTPYjcjZAWihQzPY_lkaSZxob5SCuOv_P8LSOjMMe27g45zTtPo6BNehJqaEeB-9eHr6zDhWZaI9aLgpXmzbIURnutxuCz50Xhz_Z3j9L5ONGwZ1KVHSMiTO28bLOBFLg-7e1viy0M734/s1600/nbw-404.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#007dbd), to(#003650) );   
        text-align:center;
        position:fixed;
        top:0px;
        right:0px;
        bottom:0px;
        left:0px;
        padding-top:270px;
        z-index:999999;
}
#error-page  h1 {
        font-size:540px!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-page  h2 {
        font-family:arial black,sans serif!important;
        text-transform:uppercase;
        font-size:80px;
        line-height:66px!important;
        letter-spacing: -3px;
        color:#fff!important;
        margin:0!important;
        padding:0!important;
}
#error-page p a,
#error-page p a:visited,
#error-page 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-page'>
 <h1>404</h1> <h2>LINK BROKEN</h2>
 <h2>PAGE NOT FOUND</h2>
 <p> <a href='/' title='Home Page'> Back to Home Page</a></p>
</div>


Now Save it and enjoy



0 comments:

Popular Posts

ads

Video Of the Day

Facebook

 
Copyright ©
Created By Sora Templates | Distributed By Gooyaabi Templates