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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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://stylifyyourblog.com/wp-content/uploads/2012/03/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>

.post-body {font-family:salsa;font-size:110%;font-weight:bold;}
h8{font-size:80% !important;}
.spice-email, td {font-size:80% !important;}

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

78 Replies to “30 Custom 404 Pages for Blogger”

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *