scribble

Scribble

About Blog GitHub
‹
›

30 Mar 2012
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.

Til next time,
Prayag Verma at 13:45

scribble

About Blog GitHub