30 Custom 404 Pages for Blogger

404 page
With Blogger introducing the option for Custom 404 Page for blogs recently, its been a much welcomed feature. A separate page type has also been created to give more control over these 404 pages. This feature is only available for New Blogger Interface nearly marking the end of the Old Interface (Its being officially shelved on 1st April ). Firstly we will be discussing how to use this feature followed by the collection of 30 witty 404 pages designs.


Steps for using these awesome designs on your blog

1. Go to Settings > Search Preferences

2. Under Errors and redirections , Edit the Custom Page Not Found option

3. Now copy the specific code under the images below and then paste it there

Tip: Make sure give your 404 page a witty title as well. Blogger has introduced a new page type specially for the 404 pages known as the Error Page

Go to Template > Edit HTML and paste the following code just after the <head> tag

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>You've ripped a hole in the fabric of the internet. </title>
</b:if>

Feel free to change the title as per your wish

Collection


1.
oops error 404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDuVyIfIXVTBoJfr8YJmA0p9yaRcumyD45e4aL40ce7jid163rKue9YnBKWkVqGO_yikYggRxWvgXXU0nowvUljlpECqMZTWicixAX-CC0jaXfo_LedREHIv1gBAYqErcHyGkWwh6npmI/s1600/1.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

2.
there is a problem and somebody is fixing it

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq3T2w0jPWNjgSSnNvL4R0tUqVBEppCvM-wLRheBhNbXybzt_vhKj2gXQ0cO-2FwFVib-1AvmUaj1WXTjlbNJm467L1t_kuTuS0EZYFO_YI5ZWJ2_gN4oG7xA7MqVxv8yFzQ1tFZ5Yb9vv/s1600/10.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

3.


Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6l7oLshQq1aYAQ4wfat2aHe36Wbe-TLd1F5tZx7eosq21XGV1pjjRWcTc8H35HDcIE5gFTbbC9ZNF3YQeJXpnDljgoH311aCgsvAyln-VpE7Wno6EHx5aF7sMdWntt6d16qc1gzqZ_lXm/s1600/404.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

4.
page cannot be found

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE0-n_2MsZSLY4Sae9e-wCfzWZoqcQ6Wyoty5HYkjZNYXu8Us60sJnS3uM2CUdHV18JBx8ZW6hk3W1g5oZX74Y8lUdXXJLGCSW9xMVsLcObhYQ6skGQUG1vR29anNUP32P91QueueNhLAC/s1600/11.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

5.
oh no we couldn't find 404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWTT9RPy9aCUmgh8vmla45XFlTcHJlasFxzmlnhuTjQpiWmHNKOkzJ5MEIYFkBSgKnnDv_o32__wvnKQXJVRnzMjYbOm-pgH45QYPc5fbWHHadoGmA0ePMLAUMWjMDqSVVgqxlHGbFTs-N/s1600/12.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

6.
web page required to apply call 404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQMoGBFjEm_5N8KrGJN0wZh8dUaksKjnqiKuFgK028LWnOQNuc9IMS98Yqyq-LzvXKjILLtd3hssOyCMgpuwtKy9gN-t1TAALOQCFJR02Zd5kbzOVdU3XM8cZr-dMFzQ00udCyw_ZY7xD/s1600/13.gif')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

7.
error 404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWmuEfFLxZgqX1s7UPxVmhDhQ-_AywecvEIEnMVsnGCljY0_WdDUOEBrQorfe4lOPRLKnemoOjmo0-fsc0i-IU7Di_QfzEhh3fIgaWA0kH2cjUUi3Tgo0E7lOnspXEPRMd6ZuW2bl7y74u/s1600/14.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

8.
{404}

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPLxpxNUZmrMS4NionyOpxgySdj30kmBhMB-oxBrNFcUDTLrYqrSfNZQ8dRlzsYKhRHzAqt6gtONFjBOGAz54SIcT2ilXedmhYDavQZDPUVovgN1H02ZwC_ZVI93ADEVDPq53mq3DSGWoO/s1600/15.gif')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

9.
404 page not found because i ate it

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJcQkddZXgebO4IiF2p1PJ7T4FlNOPc5HFnARJDdRtXvzjLBXRJ5oixwYgZSwM7JQh7SyDESI-c_0WFf2M5VlKTgzOmp8r4egxlJbUYP6it-hpb-ht1ygucP3tkWu1tzJtfbKOLkGUvV6w/s1600/16.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

10.
404'd file not found , in closing go away

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5Np19JmRx3k3h6Cewhgnpqzujc5b5ym1QxcmbWtNai7hVWW5G5ExMQ6Lu2Z5K4DB-5iSLuuxxvVWwZ9y8ASuV6QDvn7y3ieAlk1CzoaM_ILvgjak_oLy8lt39-8w6Gtb0FHkrzeaMQyC/s1600/17.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

11.
cannot find target server file

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig1xlcJ060nXAdB8B_a5zbC26OD6zZKQ4J_I1EPbJJktKOv5jBzdYn4lEtGlTvIyOLl00SwSQ99cQyvsx0w53_HRgGUAdl4ZbtYs64VuY5ure2ptGp59nYFsbsNiPolrWpxZVUzHyLZP_v/s1600/18.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

12.
404 error ,the page you are looking for does not exist ,go back friend

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUc3ewlWKSZyJnIGi_9AuymhlDgzrp53X926AOGNglrd_m4K377_4vdC72w0EgHYEHSYncX1wcoMXFNRhtXPuKR5VHKWtPnFMPSkKV-bdwrqzLcHyh1gHQMs_Oi2nuVFkkwLdhYqawV1Gq/s1600/19.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

13.
404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzCPgqXHl05_iwP_CoX449wkqxHgrhuWkDeoGe5rLynEJU3w338abPeEoOwxS-JMZocFoxR30mGRToAqbtnT0ifAUZ4k4C5iqmBiFdmQXQZao_m9TNMJyijO_KHgHF8cnha36aauBC-D5T/s1600/2.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

14.
page not found

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjIwvy7mv_Vy4E34GCWNxE_13_G0Fqw9jDS1wmLen-12IFdhdmCfK8nb_JoUqgRioE1nLoEFFRoFPUqrKl0HyfAoxY_Y4782reBXClXw5etB8Y8bD6yaJuaAL1aaJH0HD8Ny47PYZAx5jA/s1600/20.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

15.
404 error eaten this page

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKBp45llfKT2xdcFsuMqEu645C-18D6hWx6GZlHUtqj_28w9ilFpjEQfVlK76SxluTNKHoqXqn95RsG3Ea0QQUYEKBxR9gT1rA9p9DVEN4f1OzElsFkTF6sa7d5N7-alJIhwRq4_K-Nx8U/s1600/21.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

16.
something gone horribly wrong

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_LWgxv9aTrxwGJrxFn8SU99wmN5OdKXe1rfE-0etWQ8rqVFp8jYTWLhk2aO8VeaLy6BhcDfJ7r2MqZCKQzEJ_LczPSU8RcrxVItaq7-caWBRR43kELzxYklOdqTVNyD933F5cdxwlYFya/s1600/22.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

17.
404 forget it

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYjumREUVeKjb0WLHKzd5pkwDRU9rqQe0oKEsADR_Bco-EToRvU5T1Kcpn7fnPJ49GDVZdxnParOKdRG7NPk9f_KC1Az3mLi3jdKh0s0Kj7PV1DuX2QT5B0Fz_G-zrqlfCq2kaz0Ubehpp/s1600/23.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

18.
404 internal server error

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJz5cnBIX5tETCKOhcwxlJOpy2bsXeuvD5YSlvN8ZIuXlpYQzuRV-wceSoFByU3itjJ5e_qjy5LYucRbVbEMJEuNg8wG6QV8DBmMcJhibZJyQ3OGBvXkwo87o6gbvyddWOM3s58YyVsC7/s1600/24.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

19.
file not found trust us we looked everywhere

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBaHDUtv4baqlfg1jSDszpnREnLEqoY3IFgrQR1BGnyQjfd3byyvS2jbCqPx82oezEar89kjFDJbow60RD-xIKtYOlk-KTVdqI_aH7FZR6z5aRpZneRmVl-Lm0RoHMkU6oSUuF78T1vQYU/s1600/25.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

20.
what the ?

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzz_s-RIy6Utg0q9LfY0Xuv5t1Kiu3fW4hN9eFUbL7_BkynSU5O5pQr5_hNAFuxw7BDKcenH_wdg9lwfoJpAYyqcTyPEQimmxQLBvgviBXEfTkLRG4XMQD4ScVpAvD-47Oe5t-Po6jc8uO/s1600/26.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

21.
sorry i may have shreaded the power cord

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgodRWUgRW0qOBEOu2ZP4HoWRqD1dVs5_Ji4r-NlfOK9lHau7pNLZKjZiVU2K2ygCr2bsMj8hnUunkZBfLJtyiITyS0O9g-9mhBmHEfbscmnegq8fUJVoRnWYdjeWFHIicgf_gI2dObT4S2/s1600/27.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

22.
404 page no more kidnapped

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlQNrLtoSHqc-WIiKMB7JU6218LEUy80YX8jHVMiuf5RNzytXsyYxaMiOqQNDRa0su_mfBHYRpIGueISFdAiFCUCm9Hu1WE8K2ez6dLVTY-tOVPHdTuJndZTGfI1PPpqcsPXllC3Z2flrK/s1600/28.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

23.
truth behind the 404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0v4jWhSnuqtKvYLJfS2c7R0VgmEJR4md2jtsaU9UjOsBJd7PTeN0-Ud3PnmAM8GOydA3OPRydMskd5M3Em397XwF-gurppnHUIekaMw82WeEBJVNgjf4fHvHKfKELX8HobcdkpPqsniK/s1600/29.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

24.
404 this is not the web page you are looking forCode:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgFf02X3v6yIykCFqtveRr8_itLEAkqbj9fh6676ZEKvNBIAlzbCHc7eo6jLTHKckKAJ_bceh_OKC19z9V3hgRxJ2EXDdRqZV6qQX6P2YoyKAMCiHYupft4QNg29kYQF5HR-jdinSxPza-/s1600/3.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

25.
the page

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRCNbVS8yArNCvU-exDfj5sTNldYuohkyXp-TA0izwDXAUTJTyxfJ1RoEiTRfV_la9tzgwH7O0LwfgL0LP_tpueFZ2pUfTp5RX8a6brbovRiruVwiDTLUhdHjVKy68Z8ujC3bYkzuUyHf9/s1600/4.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

26.
202+202 404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1vKBs6rEWeg9jbBGBta8hfUkvada7zZTb8QEtgk2OAZZ9oyxk6p-8iDgADi9-47_xN2ZYhu_fkphJmxDcpkUCHk7YmEivRiq8fIMG0_0RItqZlxE9yLQ_hgDKfnP1cWjoY1mb56afgUeR/s1600/5.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

27.
uh oh that page can't be found

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJkWY_Mt8E-gf4EjFrDwVWI-kxdyXQknTBZhc4J2K-yMw0AvjbS9QNCY0wB9Hj0zsIMtaZUAxwUo2SpLOFum6Y0FOEDMjHP-zU2okNzWo85xvSECoVmcIPciXsYF7zPrCPDx3X2_Mt9En/s1600/6.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

28.
we're sorry the page you are looking for cannot be found

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jXoMEyRqAHAeIIrGocePdGp67PC1MrI2MTUhXZmQpImRXonPbuNPy4eUdS-baSdccbt1dK6fIC-LNKvwvj4nP1Y0aZ1Fhsc7IsnBokLLkQQMJym9LqhiGMmmzeqkXJc9buRJt2nSpnmB/s1600/7.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

29.
404 we the hell are we you feckless lummox

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghKH6HbY3Oann0X59hLLNgmqm0bqEW_uKRK3J85OYLcINNKqHYS4Pvufx6Drj_CLStli9bU9RHj8JvPfoVkqtoiGr0nx75rMcbRXU2oDYGnGGWPhYSayk3CjHaeqmBF-42sHwq4-wwJAEi/s1600/8.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

30.
oops, this page cannot be found

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2fCAnfucNtHgabbldI9xGrAR4HRYi-42q7lelzv4Hyf7CS96HogtdeCnMwmWBZqtaDQeDO-TYl3vQOBMxaXVwCz9-EFbwaXQIHkBVft1smNyz8uP_O8z9XLfJj2hBFI8OELk6918reN2K/s1600/9.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>



Do remember to check the 404 page of SYB and share any other 404 design of your liking via the comments below.

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Friday, March 30, 2012
Post a Comment

this blog used number 3...hohoho
from csstricks right? ;)
here i am http://beben-koben.blogspot.com/404

March 30, 2012 at 7:08 AM Delete

Yes the CSS-Tricks one
You got one hell of a 404 page , people would like to be 404'd on your blog a lot of time ;)

March 30, 2012 at 7:20 AM Delete
Dhiraj said...

http://www.rockingtemplates.com/lol Check out this page something is wrong

March 30, 2012 at 8:07 AM Delete
Lavish said...

Great Work......... :)

March 30, 2012 at 8:07 AM Delete

Thanks Varinder

March 30, 2012 at 8:09 AM Delete

in your blog ,also add the following CSS

#wrap {display:none;}

March 30, 2012 at 8:10 AM Delete
Janmejaya said...

Really great post.
Keep your work!

March 30, 2012 at 9:20 AM Delete

This is what I call Awesome ! Nice Collection Prayag. Pretty Impressive.

March 30, 2012 at 11:55 AM Delete

Thanks for the appreciation

March 30, 2012 at 6:00 PM Delete

I am glad you liked it

March 30, 2012 at 6:03 PM Delete

I have try it..

See my 404 page http://arhamvhy.blogspot.com/404

March 30, 2012 at 9:19 PM Delete
Pradeep said...

Cool collection man, very impressive, people would like to view broken links more than actual.

March 30, 2012 at 11:43 PM Delete

Great work. You have a great list. Awesome list.

March 30, 2012 at 11:52 PM Delete

Thanks for appreciating the collection

March 31, 2012 at 12:11 AM Delete

Thanks

March 31, 2012 at 12:14 AM Delete

Hey you really did a great job. I appreciate your work pal. Do you know how can we do this in WordPress?

March 31, 2012 at 12:24 AM Delete
Amit Shaw said...

Prayag awesome. Nice Job Dude.
Thanks for sharing with us. Great work.

March 31, 2012 at 12:41 AM Delete

For WordPress there are lots of plugins available ,check out a list of some 404 plugins for WP

March 31, 2012 at 1:24 AM Delete
gautam said...

nice prayag some of 404 pages are great.
keep it up.. i may use this images for my some sites.

March 31, 2012 at 1:25 AM Delete

I am changed ... hihihi :D

March 31, 2012 at 5:45 AM Delete
Rahul Roy said...

No redirection please check out my blog!

March 31, 2012 at 5:45 AM Delete

You are not putting the code of the specific 404 page in the Custom Page Not Found option , just select the 404 design you like and copy the code under it and paste it there.

March 31, 2012 at 10:49 AM Delete
Unknown said...

win7tricksandtips.blogspot.com/p/about-me.html... something went wrong prayag..........what is that

March 31, 2012 at 10:45 PM Delete

Your template is a bit too customized , you will have to add the following CSS to make this work correctly

#hellobar-wrapper , #headerall ,#uppermenu ,#wrapper , #footer_wrapper , #footer_bottom_wrapper , span, #tBird{display:none !important;}

April 1, 2012 at 2:20 AM Delete
Sandipan said...

Superb Prayag.. Simply Superb.

April 2, 2012 at 12:57 AM Delete
utsav said...

nice custom error pages

April 2, 2012 at 4:46 AM Delete
John said...

Thanks, is there any tutorial on your cool 3d looking post titles on main pages for blogger?

April 5, 2012 at 8:12 PM Delete

Its no 3D effect just text-shadow property of CSS3

April 7, 2012 at 2:34 AM Delete

Haha.. this is really funny. I still don't believe about the third and fourth example :D :D :D

April 7, 2012 at 3:26 AM Delete
Jack said...

Doesn't works on my blog, tried those css scripts too >.>

April 13, 2012 at 3:29 AM Delete

I checked your blog Jack , it is a custom template , To make it work just add the following CSS with any of the styles that like:

#lower, #wrap, #container, #mbt_bar, #important {display:none !important;}

April 13, 2012 at 3:39 AM Delete
Jack said...

Where do I exactly add this code? I tried inserting it above ]]>, and also inside the custom page not found. Still it didn't work, anyway thank you so much Prayag for your help and time.

April 13, 2012 at 4:33 AM Delete

Add this CSS

<style type="text/css" >
body {background:white url('http://2.bp.blogspot.com/-IqXGVlCP0jo/T2y8koA137I/AAAAAAAADbk/VWU059O1j1w/s1600/404.jpg') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
#lower, #wrap, #container, #mbt_bar, #important {display:none !important;}
</style>

April 13, 2012 at 5:22 AM Delete
Anonymous said...

thanks so much for these, I just added one. Very cool :)

May 11, 2012 at 3:04 AM Delete

Superb bro.....Thanks a lot

May 12, 2012 at 8:00 PM Delete
Erin! said...

Hello!
Can i have a little help please?
Not working as expected on my blog....
http://flytrap-mind.blogspot.co.uk/boo

May 15, 2012 at 5:25 AM Delete

Just add the following additional CSS

.body-fauxcolumn-outer .cap-top {background: transparent !important ;}
.navbar {display:none !important;}

May 15, 2012 at 8:53 AM Delete
jeffpents said...

You've ripped a hole...... But no image please help -- http://bit.ly/JmfRzi

May 22, 2012 at 10:08 AM Delete
samincot said...

I've put the first code. Now the blog is directing to a page with no posts: but the image is not displaying. checkout my 404 page

May 29, 2012 at 3:48 AM Delete

Greatttt!!! i'm work.thanks man :)

June 14, 2012 at 9:15 AM Delete
Honeybee said...

Interesting! got to try this.

July 23, 2012 at 9:30 PM Delete

Wow, I very like 404 Cat image, it's so cute.

July 26, 2012 at 8:54 PM Delete

hey there is no redirection only image showing up. please look at the site.

http://psuofindia.blogspot.in/

how to resolve this prob??

July 30, 2012 at 2:35 AM Delete
TheNbaZone said...

it is not working for me. can you please help?

August 1, 2012 at 5:36 AM Delete
thenbazone said...

same with me.

August 1, 2012 at 5:38 AM Delete

I checked you have put the everything correctly , but still its not working

Try this

Where you the title tag (near the head tag in the Edit HTML) , remove that code and instead put this code


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type="text/css" >
body {background:white url('http://2.bp.blogspot.com/-07Tq8gL0Qgg/T3SaL-nTBHI/AAAAAAAADdg/0RIDg5kQ_oQ/s1600/15.gif') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none !important;}
body {min-width: 0px !important;}
#lower , .content , .megamenu_fixed , #megamenu_trigger , .rwd_tab {display: none !important;}
</style>
</b:if>


Change the image as per your choice

August 1, 2012 at 6:28 AM Delete

This code is only to display the images , if you want to display the Home Link then use the following code

<style type="text/css" >
body {background:#ffffff url('IMAGE-URL') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, #HTML3, .header, .footer-top {display:none;}
body {min-width: 0px !important;}
.content {position:relative !important;top:280px !important;}
</style>

August 1, 2012 at 6:54 AM Delete

Where you the title tag (near the head tag in the Edit HTML) , remove that code and instead put this code

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type="text/css" >
body {background:white url('Image-URL') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none !important;}
body {min-width: 0px !important;}
#body-wrapper {display: none !important;}
</style>
</b:if>


Change the image as per your choice

August 1, 2012 at 6:59 AM Delete
SAMNICOT said...

THAT WAS AMAZING!!!... Thank you very much bro.
I want some help on customizing template. How can I contact you to? pls.

August 1, 2012 at 8:18 AM Delete
thenbazone said...

thank you very much sir. it is working now. can you help me in making my site a bit faster? i have a lot of javascripts.

August 1, 2012 at 11:07 PM Delete
MFMOsem said...

Finally!! after 15 minutes! haha. for my template, just add ;

#outer-wrapper {display: none !important;}

..thanks for this.

August 7, 2012 at 1:23 PM Delete
Himanshu said...

please suggest me code for my website

http://www.himvishnoi.com

August 11, 2012 at 9:09 AM Delete
Anonymous said...

can we make pages like
myblogname.com/custom
like you have done for faq page
please help

August 15, 2012 at 4:43 AM Delete
admin said...

u can also, see my awesome error page here:

http://www.thanksalot.cc.cc/404

checked out!

thanks.

August 18, 2012 at 11:45 PM Delete
wpshouter said...

awesome buddy tnx 4 your effort

August 25, 2012 at 3:05 AM Delete
Yoboy said...

Nice work mate.. Good job!

-Yoboy from Blogger Help Forum-

August 26, 2012 at 1:00 PM Delete

its not working on my blog...
http://torrent-smashable.blogspot.in/

September 15, 2012 at 7:41 AM Delete
TGS said...

I have one issue. Is this method work on the custom tempalte? I added these codes (30 th style). My one blog display noting, but other blog it display but footer cover this custom 404. How do i fix them.

September 16, 2012 at 8:43 PM Delete
Wolf said...

hi..awesome tutorial Prayag.
yaar but i have a problem ..I don't know where to find my 404 page..
do check my blog at http://highlypositive.blogspot.in

Do i have to make any changes ? Any help would be really appreciated..and onw more thing. i have bookmarked your site..all the tips are awesome..

September 17, 2012 at 5:58 AM Delete

Me gusta..

September 19, 2012 at 3:30 AM Delete
Unknown said...

Hi
I have a problem .I don't know where to find my 404 page..
Do u check my blog at http://solutionbiotech.blogspot.in/

I have tried lots of time.I need your help in this regards

Do i have to make any changes ? If u any help would be really appreciated for this.and i have bookmarked your site..all the tips are awesome..

September 27, 2012 at 2:01 AM Delete

Ahh Finally - this is what i've been looking for--
I recently moved all my Blogger Post to SMF since redirection was not possible. This will be nice to use in suggesting visitors to the new link

September 30, 2012 at 4:06 AM Delete
Unknown said...

Check my blog http://www.techbackbone.blogspot.in These 404 error pages are not working

October 8, 2012 at 7:49 AM Delete
Unknown said...

Awesome collection

Thanks alot

www.NewBloggerTips.com
New Blogger Tips

October 30, 2012 at 1:15 PM Delete

No matter what, it's not working for me...
I'm not very firm in HTML and CSS but I think, that I did everything as explained.
Please check http://schwabengeiz.blogspot.com/

November 22, 2012 at 5:04 AM Delete
RidaAli said...

very nice 404 pages. I followed your instructions but not woking on my blog.
www. lifeisrosypk . blogspot.com

November 22, 2012 at 11:00 PM Delete

Not working on my blog...Check it http://geeksware.blogspot.in/404

November 26, 2012 at 7:11 PM Delete
Unknown said...

Thank you so much! However, the 404 image is so high that you can't see the above heading. Please help! Thank you....

http://itsmesimplykai.blogspot.com/p/coupoing-with.html

December 4, 2012 at 11:49 PM Delete
Unknown said...

I beg u plz help for my blog http://thetechstars.blogspot.in/
plz help me sir i want to have it....
plz the template is malotino mag plz help

December 9, 2012 at 8:25 AM Delete
Unknown said...

Thanks very much for your help

Can you take alook in my blog and see its 404 page

http://chem2tech-en.blogspot.com/

Regards
Tamer

January 6, 2013 at 5:06 PM Delete
Anonymous said...

Nice pages liked them.

My Blogging Tricks

January 23, 2013 at 8:53 AM Delete

No matter what, it's not working for me...
I'm not very firm in HTML and CSS but I think, that I did everything as explained.

May 1, 2014 at 8:15 PM Delete
Unknown said...

www.androiderx.com

can you check this one please!

June 6, 2014 at 9:56 PM Delete
Unknown said...

Hi can you check for me www.alyssacloset.com

September 11, 2014 at 1:46 AM Delete
Haryono said...

hai!
this code not working on my blogger... :((

January 21, 2015 at 6:03 PM Delete
Unknown said...

Good collection prayag:)

February 8, 2015 at 4:11 AM Delete

Hello, I just tried installing the cute kitty 404 redirect. My catching title appears in the in the 404 page tab but the cute little kitty custom 404 isn't appearing. Any thoughts on why? I copy pasted the code exactly as it appeared under the kitty graphic.
interiorfrugalista.com/404

April 7, 2016 at 3:40 PM Delete

Hi Marie,

I checked your blog. Adding the following extra should resolve the issue --

.cap-top {
display: none;
}

April 9, 2016 at 1:16 AM Delete