Add excelent HTML5 404 error page to your blog
Sunday, November 18, 2012 | 
Posted by
ArtisTutor
It's been forever since I wrote a new tutorial but lack of time it's the main problem for me.
So here is a new tutorial who I'm sure you will find it helpful.
Now that Blogger introduced the custom error page I will present you with a beautiful HTML5 404 error page with a nice sliding effect made by a little javascript code.
Because it uses HTML 5 and CSS3 patterns for the background it will have a little display problem in IE (the background pattern and the javascript effect will not be displayed), but for the others browsers it will be displayed just fine.
So without other boring explanations let's start with the implementation of 404 HTML 5 error page.
How to add the 404 page to your blog?
1. Log in to your Dashboard--> Template- -> Edit HTML --> Proceed2. Search for the <body> tag and right after it paste the next code:
<!-- Start-->
<b:if cond='data:blog.pageType == "error_page"'>
<style>
.error-page-404 {
background: -webkit-radial-gradient(black 10%, transparent 11%) 0 0,
-webkit-radial-gradient(black 10%, transparent 11%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background: -moz-radial-gradient(black 10%, transparent 11%) 0 0,
-moz-radial-gradient(black 10%, transparent 11%) 8px 8px,
-moz-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-moz-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background: -o-radial-gradient(black 10%, transparent 11%) 0 0,
-o-radial-gradient(black 10%, transparent 11%) 8px 8px,
-o-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-o-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background: -ms-radial-gradient(black 10%, transparent 11%) 0 0,
-ms-radial-gradient(black 10%, transparent 11%) 8px 8px,
-ms-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-ms-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background:
radial-gradient(black 10%, transparent 11%) 0 0,
radial-gradient(black 10%, transparent 11%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background-color:#282828;
-webkit-background-size:16px 16px;
-moz-background-size:16px 16px;
background-size:16px 16px;
text-align:center;
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
padding-top:50px;
z-index:999;
}
header, section, footer { text-align: center; margin: 20px 0 0 0; }
section { margin-top: 25px; }
.ribbon { margin-top: 20px; }
.error-logo {margin-top: 0px;}
/* transitions */
#n1, #n2, #n3 { -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; -ms-transition-duration: 2s; transition-duration: 2s; }
/* errors */
.error { background-position: center 185px; background-repeat: no-repeat; }
.error .number { width: 348px; height: 225px; margin: 0 auto; }
#n1, #n2, #n3 { float: left; width: 100px; height: 150px; margin: 0 8px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0FyjQCP6YYwBNk0lM8XXEBw2fcYOKMY56EesDrFP2iRlcWeHIsPQ1h88XNPZszsNUKcwxWh-1lY5YVllXiJ6ztI77epi7WdQm8umGe6MTr51lRqB2yV6N1a2sGLCER8qCxK1LltNip6g/s1600/numbers.png) 0 -1500px repeat-y; }
.error-404 #n1 { background-position: 0 -600px; }
.error-404 #n2 { background-position: 0 0; }
.error-404 #n3 { background-position: 0 -600px; }
#error-not-found h1{
font-family:arial ,sans serif!important;
text-transform:uppercase;
font-size:50px;
line-height:50px!important;
border:none;
font-weight: bold;
color:#131313!important;
text-shadow: 0px 1px 1px #4d4d4d;
margin:0!important;
padding:5px!important;
text-decoration:none!important;
}
#error-not-found h2 {
font-family:arial black,sans serif!important;
text-transform:uppercase;
font-size:55px;
line-height:50px!important;
border:none;
font-weight: bold;
color:#191B1C!important;
text-shadow: 0px 1px 1px #4d4d4d;
margin:0!important;
padding:5px!important;
text-decoration:none!important;
}
#error-not-found p a{
font-family:arial black ,sans serif!important;
text-transform:uppercase;
font-size:20px;
border:none;
font-weight: bold;
color:#111111!important;
text-shadow: 0px 1px 1px #4d4d4d;
margin:0!important;
padding:5px!important;
text-decoration:none!important;
}
/* footer */
footer {
height: 92px;
background: url(http://img28.imageshack.us/img28/4821/footerbackground.png) 0 0 repeat-x;
margin: 80px auto 0 auto;
}
footer .container {
width: 552px;
height: 32px;
margin: 0 auto;
padding: 20px 0;
}
footer .engine{
z-index: 99999;
display:block;
position:absolute;
top:-47px;
margin-left:770px;
width:175px;
height:40px;
background:url(http://img651.imageshack.us/img651/6979/searchfield.png) no-repeat left top;
padding:0
}
footer .search .field{
float:left;
display:inline;
height:40px;
width:135px
}
footer .search .field input{
color:#ccc;
border:0;
background:transparent;
font-size:11px;
margin:3px 0 0 10px;
padding:4px;
width:110px
}
footer .search .button{
float:left;
display:inline;
height:40px;
width:37px;
cursor:pointer;
border:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPAtcZPkveGAuuJA0CVUW19dfKEIDQyPn6U8K_liBLTSXRoX3RMWir_dHNsVUu8NR7-4LXaJXbYaKkBuDe2oDDJm4E5sGHNDbrVwk-2GxURWsYg1hJNm5zYo45zPkj8rXbF5TdQnG2QSs/s320/search_button.png) no-repeat 0 0
}
footer .search { display: block; width:173px; height: 32px; margin: 0 auto; background:url(http://img651.imageshack.us/img651/6979/searchfield.png) no-repeat left top; }
</style>
<div class='error-page-404'>
<div class='error-logo'><img alt='' src='http://img546.imageshack.us/img546/2760/4044u.png'/></div>
<header>
<div class='ribbon'><img alt='' src='http://img39.imageshack.us/img39/3108/ribbont.png'/></div>
</header>
<section class='error' data-error='404'>
<div class='number'>
<div id='n1'/>
<div id='n2'/>
<div id='n3'/>
</div>
</section>
<div id='error-not-found'>
<h1> Page not found</h1>
</div>
<footer>
<div class='container'>
<div class='search'>
<form action='/search' id='searchthis' method='get'>
<div class='field'><input name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = "";}' type='text' value='Search...'/></div>
<input class='button' type='submit' value=''/>
</form>
</div>
</div>
<div id='error-not-found'>
<p><a href='/'>go to homepage</a></p>
</div>
</footer>
</div>
</b:if>
3. Search "Ctrl+F" and find </head>. Before it paste the code:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Set error
var error = $('section[data-error]');
error.attr('class', 'error error-' + error.attr('data-error'));
});
//]]>
</script>
4. Find <b:includable id='main' var='top'> and after paste the next code:
<b:if cond='data:numPosts == 0'> <data:navMessage/> </ b: if>
That's it . Enjoy the new error page for your blog
IMPORTANT Some of the features from the error page implemented on this blog will not be available for you (search box style, some other different changes.)
Get Latest Updates For Free!
Subscribe via Email
12 comments
Very nice tricks...
Hello!
Thank you for your work, for a very useful code.
In your code the error.
error.attr('class', 'error error-'<< ?>> error.attr('data-error'));
<> - lack of +, as in your blog.
Code like this: error.attr('class', 'error error-' + error.attr('data-error'));
Question:
Error 404 issued only if the error after the domain
Example: example.example.com/404 and another, and after поска,
Application: example.example.com/search?q=404 , does not open a page of Error 404, апросто goes to a regular page.
How do whatever for any error, opened page "Error 404"
Thank you
@VladimirI just forgot to add the +, now it's fixed. Thanks.
On that exemple you gave it's not possible to display a 404 error page because your exemple:
...com/search?q=404 will define a search query where "404" it's the word to be searched.
The page will display the results of your search and not the error page.
@ArtisTutor
It is clear, thanks for the quick reply.
Tell me please, how ностроить in blogger: settings - >search settings>Error and redirect>Personalized error message "Page not found".
What would design was like, such as in the error 404, just the design would be, not a 404 error, and the page is not found.
Thank you
@VladimirIt's the same thing with adding the code to your template, but something depending of the code for the page it might have some errors
@ArtisTutor
Thanks for the quick reply.
I inserted the code and script in Settings - >search Settings>Error and redirect>Personalized error message "Page not found". Error: Your HTML cannot be accepted: Tag is not closed: DIV.
The code may need to tweak?
How correct I don't know.
Most prozba, could you выложеть here and complete legal code for the insert >Custom error message "Page not found"
Yours Sincerely Vladimir
Thank you
@ArtisTutor
Sorry didn't notice that you've added code.
This is for shortcuts as I understand.
So already luchshe, thank you.
But all the same like that would be a mistake m page not found were in the same design, if it is possible.
Yours Faithfully, Vladimir.
Thank you.
It's Awesome...
wow.. like this... i try it.
brilliant post,,thamks for giving this great 404 error
Regards:
BLOGGER Tips and Tricks!
I think a great 404 Error Page is the sign of a great website. A bunch of times, it made me actually stay on the website. People should pay more attention to it.
Great Content.I have appreciate with getting lot of good and reliable information with your post.......
Thanks for sharing such kind of nice and wonderful collection......again, beautiful :) I love reading your posts. They make me happy .
web design quote
Click to Add a New Comment
Leave your comment
- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.