10+ Custom 404 Error Pages For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Sunday 1 April 2012

10+ Custom 404 Error Pages For Blogger



Recently Blogger introdued new Blogger Search Preference option for blogger blogs. With introduction of latest search preference they introduced "Errors And Redirections" in simple we can say it "404 Error" It is a great feature of bloggers which will help them to set a custom 404 Error Page as they wish.Here I am giving some samples of 404 Error pages you can use them or you can add your own.But before adding any custom 404 error template you have to disable by default 404 message of blogger.

By Default, your Blogger Error page will display this error message


If you want to add custom message then you have to disable above default message first...
To disable blogger's by default status follow below instructions :

  1. New blogger User Interface.
  2. Blogger Dashboard > Design > Edit HTML.
  3. Download your template.
  4. Add below code just above </head> tag.

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
</style>
</b:if>


Custom 404 Error Templates

Here we are sharing collection some cool 404 error template which was collected by Prayag.You can also edit the codes and change it to as you wish.You can use our HTML Editor to see live preview of your changes.

  • Now go to Settings > Search Preferances. (In new User Interface)
  • Choose one of the 404 template below
  • Copy code and paste it in textarea box and save box.


Error Page Template 1



<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbe0jU9F3CZ_OTDfGDUb5Z-2uAuWNFxtVd3zbRb5I-vOVwSOr-2cVMB5PxwHnpq5OJAFsUg0UNzrOU3tgibykXz-luSfOgfzNoXLRsZqSGccfVTeeZIf7uCd58l9qaPZp2uskL42COGPs/s1600/404+error+page+7.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>


Error Page Template 2


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


Error Page Template 3


<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDhjevbm08qoGLbgpFpDK4oQW6TXHaztR4cs7BT81vwC1KJrfUzbjkOavq2mqagcm0GMkXSzl5wXopCF50khUYkpj0ykDCfTvy1zQ4cciH60Jj0DCgiGOqezTJ-pT-4hoUYjzpI_pfrbv-/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>


Error Page Template 4


<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbe0jU9F3CZ_OTDfGDUb5Z-2uAuWNFxtVd3zbRb5I-vOVwSOr-2cVMB5PxwHnpq5OJAFsUg0UNzrOU3tgibykXz-luSfOgfzNoXLRsZqSGccfVTeeZIf7uCd58l9qaPZp2uskL42COGPs/s1600/404+error+page+7.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>


Error Page Template 5

/div>

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju8NxwBhcdcLr7_zlyj4MIA0eJ3I4lM2QoFClZj1PzRTkZaTzIXr1zsnctVl7DYZiplZiJnHeCn4LvvVxO2cGlNy2tG5hM5agWMwwyKS08gEcLcvQObUWcLGkKiQHxiksG_uUFcgqNACQ/s320/404+error+page+1.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>


Error Page Template 6


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


Error Page Template 7


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


Error Page Template 8


<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>
</style>


Error Page Template 9


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


Error Page Template 10


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


Error Page Template 11


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


Error Page Template 12


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


Error Page Template 13


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


If you have more such 404 error pages then don't forgot to share it via comments...

9 comments:

  1. Lovely images for 404 error page. I like this new feature of Blogger, and thanks to you for making this easy to customizable.

    My Blog: Visit Shine Mat

    ReplyDelete
    Replies
    1. Thnaks Saimoom.I visited your blog it is very nice....

      Delete
  2. Very good idea, I tried it on my blog but I do not get any message just blank page. Is there any solution?

    ReplyDelete
  3. It is not working on my blog.

    ReplyDelete
  4. Not working, it's just blank page, any suggestions ?

    ReplyDelete
  5. I have problem with my custom template...i install it but can't see anything!!! Only a blank page open with my sidebar and footer...If you want please help me how to install it in my blogger to work!!! Thanks...
    My blog link is :http://alhtogates.blogspot.gr

    ReplyDelete
  6. this is awesome . thanks allot

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM