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('http://1.bp.blogspot.com/-_nW7TmIkEWw/T3SZ9EjpeLI/AAAAAAAADcw/jhYv2i9hE30/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('http://4.bp.blogspot.com/-ODAyD5JasIA/T3SaBjtBZWI/AAAAAAAADc4/Z0OOdsACbT4/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('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;}
</style>

4.
page cannot be found

Code:
<style type="text/css" >
body {background:white url('http://2.bp.blogspot.com/-rJdUa4NqEvA/T3SaDCQQX-I/AAAAAAAADdA/x35P0XCtFkI/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('http://4.bp.blogspot.com/-fPGVCfi8juo/T3SaIXELC0I/AAAAAAAADdI/njTxaVQ3hv8/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('http://4.bp.blogspot.com/-lWH_CidqS7A/T3SaJkTrOVI/AAAAAAAADdQ/hNAkSej5_-s/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('http://3.bp.blogspot.com/-cBZsmnOiWrM/T3SaK9z5-2I/AAAAAAAADdY/VT1doL7Q9KQ/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('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;}
body {min-width: 0px !important;}
</style>

9.
404 page not found because i ate it

Code:
<style type="text/css" >
body {background:white url('http://2.bp.blogspot.com/-jJ_26UAIJsI/T3SaNVg7l5I/AAAAAAAADdo/a7LQr38En4k/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('http://3.bp.blogspot.com/-mZH84IbeRdc/T3SaPNAzhmI/AAAAAAAADdw/5aDvRWsJfIQ/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('http://1.bp.blogspot.com/-1eg_JUXi1hA/T3SaQg0RyRI/AAAAAAAADd4/x7AgXB12BJI/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('http://3.bp.blogspot.com/-i1gm2JH5pfk/T3SaRzLgykI/AAAAAAAADeA/F-U_YeWDmJc/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('http://2.bp.blogspot.com/-aG5cP8p7o_I/T3SaTkT36QI/AAAAAAAADeI/FsbF3e4lXQE/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('http://2.bp.blogspot.com/-Cf38etYZ9-I/T3SaVJXBsvI/AAAAAAAADeQ/MMbaJpempbM/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('http://1.bp.blogspot.com/-h-R-k3VGcLE/T3SaV6UL7DI/AAAAAAAADeY/NTYP95fJZDU/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('http://1.bp.blogspot.com/-Si0YZCegSWg/T3SaX900-cI/AAAAAAAADeg/eGKOFvulIe0/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('http://1.bp.blogspot.com/-cU-M8yYyW48/T3SaZl-1aUI/AAAAAAAADeo/7Fuyvx7ztAM/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('http://3.bp.blogspot.com/-1dmKRFghyls/T3SabCVdXdI/AAAAAAAADew/9tV9HhaYZqE/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('http://2.bp.blogspot.com/-oA6TapIsrEA/T3SacXb-FLI/AAAAAAAADe4/JVlE-FDyDUs/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('http://3.bp.blogspot.com/-0v1buyDHaPc/T3Sadfx2XxI/AAAAAAAADfA/oG5JgqHAR4k/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('http://1.bp.blogspot.com/-u8iG_6AXIog/T3SafeUWkpI/AAAAAAAADfI/8grWqQsa4nM/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('http://3.bp.blogspot.com/-26DYJtSeX4w/T3Sagk5hVBI/AAAAAAAADfQ/CoHwgFeDfl4/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('http://3.bp.blogspot.com/-kAuUGv-ql9c/T3SaipcQb8I/AAAAAAAADfY/TxeGEXv1h64/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('http://3.bp.blogspot.com/-5SFkmqRvMCQ/T3Sakx8oobI/AAAAAAAADfk/PcjuCFlSvAY/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('http://4.bp.blogspot.com/-C45nv_Rafm0/T3SamEZ33fI/AAAAAAAADfs/bS-YASblcsE/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('http://4.bp.blogspot.com/-SjkdED58HNo/T3Sang2RskI/AAAAAAAADf0/7bOWMEAKAzM/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('http://4.bp.blogspot.com/-02kltH_9-8A/T3SarNv5ElI/AAAAAAAADf8/GKvqoJRE4eI/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('http://2.bp.blogspot.com/-SFZa-holDjU/T3SasNpz5PI/AAAAAAAADgA/0AqrEmktztE/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('http://1.bp.blogspot.com/-5zSjs_PzXv0/T3SatH6lGVI/AAAAAAAADgM/ztXZIrKY6ts/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('http://2.bp.blogspot.com/-2n6J8shby9c/T3Say_IFqhI/AAAAAAAADgU/CfW5qT4kVhI/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

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

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

Post a Comment

Hi Marie,

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

.cap-top {
display: none;
}

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

Good collection prayag:)

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

Hi can you check for me www.alyssacloset.com

www.androiderx.com

can you check this one please!

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.

Nice pages liked them.

My Blogging Tricks

Totti tito 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

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

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

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

Rida Ali said...

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

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/

Awesome collection

Thanks alot

www.NewBloggerTips.com
New Blogger Tips

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

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

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..

Me gusta..

Ryan Sinha 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..

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.

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

Nice work mate.. Good job!

-Yoboy from Blogger Help Forum-

wpshouter said...

awesome buddy tnx 4 your effort

admin said...

u can also, see my awesome error page here:

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

checked out!

thanks.

Anonymous said...

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

Himanshu said...

please suggest me code for my website

http://www.himvishnoi.com

MFMOsem said...

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

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

..thanks for this.

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.

SAMNICOT said...

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

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

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>

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

thenbazone said...

same with me.

TheNbaZone said...

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

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

http://psuofindia.blogspot.in/

how to resolve this prob??

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

Honeybee said...

Interesting! got to try this.

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

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

jeffpents said...

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

Just add the following additional CSS

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

Erin! said...

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

Superb bro.....Thanks a lot

Michelle said...

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

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>

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.

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;}

Jack said...

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

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

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

John said...

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

utsav said...

nice custom error pages

Sandipan said...

Superb Prayag.. Simply Superb.

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;}

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

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.

Rahul Roy said...

No redirection please check out my blog!

I am changed ... hihihi :D

gautam said...

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

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

Amit Shaw said...

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

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

Thanks

Thanks for appreciating the collection

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

Pradeep said...

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

I have try it..

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

I am glad you liked it

Thanks for the appreciation

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

Janmejaya said...

Really great post.
Keep your work!

in your blog ,also add the following CSS

#wrap {display:none;}

Thanks Varinder

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

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

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 ;)

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