Now you can create a Custom Page Not Found (Error 404 Page) for the Blogspot Blogger blog. This page appears only –
1. When a reader reaches a page that does not exist or
2. The Reader types the wrong permalink for a post or page. This type of link is known as a broken link.
You can just check the example of a custom error page on my blog.
Blogger has prepared a new page, “blog.pageType,” which is known as “error_page.” This page type is used as follows in the 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
2. Now, under Errors and Redirects, you can find Custom 404. Now, click on this.
3. Next, a box comes up, and paste the following given code.
4. Finally, click on the Save button to save the code.
CUSTOM PAGE NOT FOUND CODE
<style> #error-page { background: #007dbd; background: url(https://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(https://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>
Error 404 is a part of blogging and Error 404 customization is very easy with the use of custom CSS.
Nice post! Happy Holi!
Same to you!
Amazing work thanks!
Thanks dear!
Not work on my blog? Why? Thanks!
Hi Diky you should paste this code in your blogger template just above </body> tag. Regards
work great thanks ..
Most welcome!
Aslam o alikum
Sir mera blog jab open kro to akser blog nai open hota googledotcom dot pk open ho jati hy koi solv btaen
Mujhe aapke blog par aisie koi problem nahi dikhi….
thanks u sir… great artical
Thanks buddy, now I have customized error page in my blog.
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.
Very good post for beginner. I have also benefit of this site.
thank you very much sir.