How to Create a Custom Page Not Found (Error 404 Page) on Blogspot?

12

Now you can create a Custom Page Not Found (Error 404 Page) for Blogspot Blogger blog. This page appears only –

1. When a reader reaches a page that does not exist or
2. Reader type wrong permalink for a post or page. This type of link is known as a broken link.

Custom Page Not Found for Blogger

You can just check the example of custom error page on my blog.

Blogger has prepared a new page “blog.pageType” which is known as “error_page” and this page type is used as following in Blogger template.

<b:if cond='data:blog.pageType == "error_page"'>
<!-- You're Code Here -->
</b:if>

This error page design is an idea only. You can create a custom error page as per your blog design and creativity.

Add Custom Page Not Found (Error 404 Page) to Blogger

1. Blogger Dashboard › Select Blog › Select Settings tab › Search Preferences

2. Now under Error and redirections, you can find Custom Page Not Found. Next, to this, there is an Edit option. Now click on this.

3. Next, a box comes up and paste following given code and finally click on Save Changes button to save code.
Set Custom Page Not Found to Blogger

CUSTOM PAGE NOT FOUND CODE

<style>
#error-page {
    background: #007dbd;
    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, #007dbd 0%, #003650 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(#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>

——————————————————————————–
Credit: Urang Kurai – http://urang-kurai.blogspot.com/
——————————————————————————–

Conclusion

Error 404 is now a part of Blogger which is being better day by day and Error 404 customization is very easy with the use of custom CSS.

12 COMMENTS

  1. आपको होली कि हार्दिक शुभकामनायें और बधाई !!

    • आपको भी होली की हार्दिक शुभकामनाएँ और बधाई !!

  2. Aslam o alikum
    sir mera blog jaab open kro to akser blog nai open hota googledotcom dot pk open ho jati hy koi solv btaen

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.