Exclusive: Stylish 404 Error Page for Blogger

Rate this Post:

{[['

']]}

Custom 404 Error Page for Blogger with Animation.
Follow these steps to install it in your Blog;

>Login to Blogger
>Template / Edit HTML / Continue
>Find the </ body>
>Paste before it the following code:

Watch The Demo

<b:if cond='data:blog.pageType == "error_page"'>
<style>
.post, .post h1, .post h2, .post h3, .post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header, .sidebar, .footer, .header,.blog-pager,.topnav,.credit,#menuwrapper,#footer-wrapper,.toppic,.picfooter,#header-wrapper,.bloggertipsandtricks, #outer-wrapper, .outer-wrapper
{display:none;}
body {
background-attachment: fixed;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGQheJGi-tMaDia1NtVDoVjjgddxD7RGoJUFEYhXM6U1tUi9lZ_RqkqcHl05FVzakIp804l2jn34mqE39i7tP45jaHv1hf9anLDEIkPDbJ7zHdg12i6vTZmsC9dwLSbxp527JQUnMMaMrb/s1600/dot.png),
url(http://4.bp.blogspot.com/-wSv4Di64IPI/UORk9-CksXI/AAAAAAAAAGA/BMYlJ94zX6Q/s320/404.gif);
background-position: 50% 50%;
background-size: auto, cover;
font-size: 100%;
}
h1 {
background: hsla(0,0%,0%,.75);
bottom: 100px;
color: #b59788;
font: 2em/1 Sancreek, sans-serif;
left: 0;
padding: .5em 2em .5em 1em;
position: absolute;
}
@font-face {
font-family: 'Sancreek';
font-style: normal;
font-weight: 400;
src: local('Sancreek Regular'), local('Sancreek-Regular'),
url(http://themes.googleusercontent.com/static/fonts/sancreek/v4/0sp5vaO1xlh1oVM73vz23vesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
foot{ font:14px/1.3 'Segoe UI',Arial, sans-serif; background-color: #111111; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.4); height: 45px; left: 0; position: fixed; width: 100%; z-index: 100000; } foot h3{ color: #EEEEEE; font-size: 11px; font-weight: normal; left: 50%; margin-left: -280px; padding:6px 0 0; position: absolute; width: 540px; } foot h3 i{ font-style:normal; color:#888; } foot a.btt,a.btt:visited{ color: #999999; font-size: 12px; left: 50%; margin:15px 0 0 110px; position: absolute; text-decoration: none; top: 0; } foot a i{ color:#ccc; font-style: normal; } foot a i b{ color:#c92020; font-weight: normal; }
</style>
<h1>Error 404! Go <a href='http://lab4bloggerprofessionals.blogspot.com/'>Home</a>!</h1>
<foot>
<h3><i>Copyright © 2012 <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a></i> All Rights Reserved </h3>
<a class='btt' href='http://lab4bloggerprofessionals.blogspot.com/'>Powered by <i><b>Blogger</b></i></a>
</foot>
</b:if>