As you know that Blogger has default option for 404 error pages and this page is customizable to. Blogger's 404 page allows HTML, So you can easily add some codes in default 404 error page box.
Here two different style funny but useful 404 pages HTML code given below. These pages developed by me, what offer's a cute ghost!, go back option, contact page link and your site's social media profile option (Facebook, Twitter and feed). Choose any style and copy codes and paste them into your Blogger, than see a cool Error page in live action. Let's how these look like, how to configure, and set up into Blogger
Set up Cool 404 error page for your Blogger
Style 1: Shadow style
Live Demo- (Click Here)
Codes for copy-
<style>
/*crawlist.net CSS starts*/
.ks-404{
margin: 0 auto;
padding: 20px 20px;
min-height: 250px;
background: #fff;
border: 2px solid #999;
-moz-box-shadow: 0px 10px 20px #ccc;
-webkit-box-shadow: 10px 0px 20px #ccc;
box-shadow: 0px 10px 20px #ccc;
}
.ks-404 h4{font-size: 50px; font-weight:bold;color:#FF3300; font-family:Georgia;}
.ghost img{width:100px;height:100px;}
.grow img {
height: 100px;
width: 100px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow img:hover {
width: 150px;
height: 150px;
}
.ks-404 p{ font-family:Tahoma; font-size:15px;}
/*crawlist.net CSS ends*/
</style>
<div class='ks-404'><!--crawlist.net 404 starts-->
<h4 align="center"><span class='ghost'><div class="grow pic">
<img src="http://1.bp.blogspot.com/-jyf86hj6epw/U2piynXhD3I/AAAAAAAAD48/v7PhxmIuKU8/s1600/ghost+-+Copy.png" alt="404"/>
</div></span>404 Error</h4>
<p align="center">Looks like you are trying to reach a page/post that doesn't exist in our site or has been deleted</p>
<p align="center">Here's few thing we can help you right now</p>
<p align="center"><a href='javascript:history.go(-1)'>Go Back</a></p>
<p align="center">Or request a quote to us <a href='http://your site.com/contact'>by Clicking here</a></p>
<p align="center">Or Back to our <a href='http://your site.com'>Homepage</a></p>
<p align="center">We are on <a href='https://www.facebook.com/you' target='_blank'><img alt='Facebook' src='http://2.bp.blogspot.com/-7_nGyJ9a01k/UxxdnHvSlpI/AAAAAAAADXA/58h5-9X37sQ/s1600/1facebook.png' height="20" width="20" title='Facebook'/></a>
<a href='http://twitter.com/you' target='_blank'><img alt='Twitter' src='http://1.bp.blogspot.com/-4weTRAD8vog/UxxdnH9LehI/AAAAAAAADW8/ar3y7V0vnko/s1600/2twitter_alt.png'height="20" width="20" title='Twitter'/></a>
<a href='http://feeds.feedburner.com/you' target='_blank'><img alt='Feed' src='http://1.bp.blogspot.com/-6ZAOGegt7Qg/Uxxdpb0_guI/AAAAAAAADXk/O8DWOQtKCqU/s1600/6rss.png'height="20" width="20" title='Feed'/></a></p>
<i>Thanks for visiting</i><!--crawlist.net 404 ends--></div>
Style 2: Box style
Live Demo- (Click Here)
Codes for copy-
<style>
/*crawlist.net CSS starts*/
.ks-404{
background:#FFFFFF;
width:96%;
margin:10px 0px;
padding:15px 15px;
border:1px solid #b9b6b6;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
box-shadow: 10px 10px 10px #e3e3e3;
min-height:250px;
}
.ks-404 h4{font-size: 50px; font-weight:bold;color:#FF3300; font-family:Georgia;}
.ks-404 p { font-family: Tahoma; font-size:15px;}
.ghost img{width:100px;height:100px;}
.grow img {
height: 100px;
width: 100px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow img:hover {
width: 150px;
height: 150px;
}
/*crawlist.net CSS ends*/
</style>
<div class='ks-404'><!--crawlist.net 404 starts-->
<h4 align="center"><span class='ghost'><div class="grow pic">
<img src="http://1.bp.blogspot.com/-jyf86hj6epw/U2piynXhD3I/AAAAAAAAD48/v7PhxmIuKU8/s1600/ghost+-+Copy.png" alt="404"/>
</div></span>404 Error
</h4>
<p align="center">Looks like you are trying to reach a page/post that doesn't exist in our site or has been deleted</p>
<p align="center">Here's few thing we can help you right now</p>
<p align="center"><a href='javascript:history.go(-1)'>Go Back</a></p>
<p align="center">Or request a quote to us <a href='http://your site.com/contact'>by Clicking here</a></p>
<p align="center">Or Back to our <a href='http://your site.com'>Homepage</a></p>
<p align="center">We are on <a href='https://www.facebook.com/you' target='_blank'><img alt='Facebook' src='http://2.bp.blogspot.com/-7_nGyJ9a01k/UxxdnHvSlpI/AAAAAAAADXA/58h5-9X37sQ/s1600/1facebook.png' height="20" width="20" title='Facebook'/></a>
<a href='http://twitter.com/you' target='_blank'><img alt='Twitter' src='http://1.bp.blogspot.com/-4weTRAD8vog/UxxdnH9LehI/AAAAAAAADW8/ar3y7V0vnko/s1600/2twitter_alt.png'height="20" width="20" title='Twitter'/></a>
<a href='http://feeds.feedburner.com/you' target='_blank'><img alt='Feed' src='http://1.bp.blogspot.com/-6ZAOGegt7Qg/Uxxdpb0_guI/AAAAAAAADXk/O8DWOQtKCqU/s1600/6rss.png'height="20" width="20" title='Feed'/></a></p>
<i>Thanks for visiting</i><!--crawlist.net 404 ends--></div>
How to add this to your Blogger
- Log in to your Blogger,
- Go to 'Settings' tab, then select 'search preferences',
- Then select 'Error and redirection', 'Custom page not found'
- Select 'edit' and paste following code in box
How to configure Error page's options
- To configure 'by Clicking here', collect your Blog's contact page link and paste link in 'http://your site.com/contact' (it orange colored)
- To configure 'Homepage', In 'http://your site.com' link replace with your website's link (it pink colored)
- To configure Social media profiles, First collect your following social profile links and replace with default links, example 'https://www.facebook.com/you' replace with your Facebook profile/page link, Twitter and Feed-burner link is same (All changeable links are red colored)
After set up is completed now time to check is it working or not. In address bar type your site address with wrong keyword (like- yoursite.blogspot.com/somethingnotexist ) and see your 404 page in action.
Template Compatibility
This 404 Error page is compatible with almost all stranded templates but unique designed templates, highly coded templates, Dynamic view templates will not compatible.
So what is your feeling about these 404 error page and how it looking on your Blogger blog don't forget to mention.
