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('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('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('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

Find me on Twitter

Email Newsletter

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

Post a Comment

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

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

Dhiraj said...

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

Lavish said...

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

Thanks Varinder

in your blog ,also add the following CSS

#wrap {display:none;}

Janmejaya said...

Really great post.
Keep your work!

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

Thanks for the appreciation

I am glad you liked it

I have try it..

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

Pradeep said...

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

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

Thanks for appreciating the collection

Thanks

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

Amit Shaw said...

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

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

gautam said...

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

I am changed ... hihihi :D

Rahul Roy said...

No redirection please check out my blog!

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.

Unknown said...

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

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

Sandipan said...

Superb Prayag.. Simply Superb.

utsav said...

nice custom error pages

John said...

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

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

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

Jack said...

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

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

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.

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>

Anonymous said...

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

Superb bro.....Thanks a lot

Erin! said...

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

Just add the following additional CSS

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

jeffpents said...

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

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

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

Honeybee said...

Interesting! got to try this.

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

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

http://psuofindia.blogspot.in/

how to resolve this prob??

TheNbaZone said...

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

thenbazone said...

same with me.

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

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>

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

SAMNICOT said...

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

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.

MFMOsem said...

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

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

..thanks for this.

Himanshu said...

please suggest me code for my website

http://www.himvishnoi.com

Anonymous said...

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

admin said...

u can also, see my awesome error page here:

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

checked out!

thanks.

wpshouter said...

awesome buddy tnx 4 your effort

Yoboy said...

Nice work mate.. Good job!

-Yoboy from Blogger Help Forum-

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

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.

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

Me gusta..

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

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

Unknown said...

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

Unknown said...

Awesome collection

Thanks alot

www.NewBloggerTips.com
New Blogger Tips

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/

RidaAli said...

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

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

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

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

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

Anonymous said...

Nice pages liked them.

My Blogging Tricks

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.

Unknown said...

www.androiderx.com

can you check this one please!

Unknown said...

Hi can you check for me www.alyssacloset.com

Haryono said...

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

Unknown said...

Good collection prayag:)

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

Hi Marie,

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

.cap-top {
display: none;
}