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.

Related Articles

Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 3 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
Beben Koben said...

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

Prayag Verma said...

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

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

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

Prayag Verma said...

Thanks Varinder

Prayag Verma said...

in your blog ,also add the following CSS

#wrap {display:none;}

Janmejaya said...

Really great post.
Keep your work!

Abhisek Das said...

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

Prayag Verma said...

Thanks for the appreciation

Prayag Verma said...

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.

Prayag Verma said...

Thanks for appreciating the collection

Prayag Verma said...

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.

Prayag Verma said...

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.

Beben Koben said...

I am changed ... hihihi :D

Rahul Roy said...

No redirection please check out my blog!

Prayag Verma said...

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.

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

Prayag Verma said...

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?

Prayag Verma said...

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

Prayag Verma said...

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.

Prayag Verma said...

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>

Michelle 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

Prayag Verma said...

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.

Disukai.Com said...

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

PSU OF INDIA said...

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.

Prayag Verma said...

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

Prayag Verma said...

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>

Prayag Verma said...

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

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.

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

Me gusta..

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

Soki Briggs said...

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

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

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/

Rida Ali 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

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

Hari charan 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

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

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.

www.androiderx.com

can you check this one please!

Hi can you check for me www.alyssacloset.com