Subscribe For Free Updates!

We'll not spam mate! We promise.

Tuesday, January 7, 2014

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/AVvXsEiwUY2jSXhgNsEgoRu7EeyD-kk2pJT_8fsnxWhHehS2gH2ITnw3K__xqdGqn-LaJAHsuNnWXbMx-cAdjuXZ8gFAp4da4m9L_mDGaD02CmpMEwM0lrt4lfCJn82kliFbhBedc2X_A-rXx1A/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/AVvXsEhx9GY1OAxwvFG41I5KLjNPvPBt6qE8QUdu9QWag8yiprKrtlFmGeVH5LOPG-KZwXbHeQbSGAbnG359M7-O8vAF_CSv8qRs6OuNRIt98RkqPI7P6DK8j9wri2gV93ptS65grO038jRDgd8T/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/AVvXsEiwUY2jSXhgNsEgoRu7EeyD-kk2pJT_8fsnxWhHehS2gH2ITnw3K__xqdGqn-LaJAHsuNnWXbMx-cAdjuXZ8gFAp4da4m9L_mDGaD02CmpMEwM0lrt4lfCJn82kliFbhBedc2X_A-rXx1A/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/AVvXsEjAv7FegyNLtsDIqR6mdzOaA1a9TZUck6qKaSaITG9ZdZ55hglH8T1edjouxwu5nIEQOwQjWVdXD7lUAp3bbVvUDrX-SrS0xxHeZE2Gd-mCpaVMGcalDlb9JLjEpJ0ZmQW4O-WJ3KUuWTE/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...

Socializer Widget By Dashing Blogger
SOCIALIZE IT →
FOLLOW US →
SHARE IT →
Comment With:
OR
Choose Wisely!

No comments: