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

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.

14 thoughts on “How to Create a Custom Page Not Found (Error 404 Page) on Blogspot?”

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

    1. Avatar photo
      Vinay Prajapati

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

    1. Avatar photo
      Vinay Prajapati

      Hi Diky you should paste this code in your blogger template just above </body> tag. Regards

  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

  3. Avatar photo
    Murali Krishna

    Thanks a lot. I used the same script for my website.
    Please check my website with any broken link then the 404 pages the same as your code.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top