Membuat HTML5 Page Error 404 di Blogger Anda

Sudah selamanya sejak saya menulis tutorial baru tapi kurangnya waktu itu masalah utama bagi saya.
Jadi di sini adalah tutorial baru yang saya yakin Anda akan merasa terbantu.
Sekarang Blogger memperkenalkan halaman kesalahan kustom saya akan hadir dengan HTML5 halaman error 404 yang indah dengan efek geser bagus yang dibuat oleh kode javascript kecil.
Karena menggunakan HTML 5 dan CSS3 pola untuk latar belakang akan memiliki masalah tampilan kecil di IE (pola latar belakang dan efek javascript tidak akan ditampilkan), tetapi untuk orang lain browser akan ditampilkan baik-baik saja.

Demo

Jadi tanpa penjelasan membosankan mari kita mulai dengan pelaksanaan Membuat HTML5 Page Error 404 di Blogger Anda.

Cara Membuat HTML5 Page Error 404 di Blogger Anda?

1. Login ke Dashboard -> Template -> Edit HTML.

2. Pencarian untuk tag </body> dan tepat setelah itu paste kode berikut ini:

<!-- Start-->
 <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<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/AVvXsEjWmVhQGo-ItsRHV6fMAMUMa043TJoCAD9a2EO6S_0rhLt7o-yUaTCCariBsVIhZlC8JZ5pMDYKMLzsSNjuQbX_z1RC52R1ZUm3acJsbaolSyjG3CNiFN9QgaeQwBjiwv1MFSsgk_dBelM/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/AVvXsEiwoZfpy_2Sf_8halQzdXo1wtqk-RKl7pJkOAUT3ojP-ujO3SV-t71LPtKdkZnsReuLvLC_zuJSllcEgdNTXeC6eMUYDxw1RjSJ2dTAM5us9_JDnso-K1TbRrWyYbZ6JB3n4tiGkRWr0Jk/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 == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' 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. Cari kode </head> menggunakan "CTR+F" pastiken kode dibawah ini di atas kode </head>.

<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. Cari Kode <b:includable id='main' var='top'> taruh kode berikut dibawah kode <b:includable id='main' var='top'>

<b:if cond='data:numPosts == 0'>
 <data:navMessage/>
</b:if>

Ok, Itu saja. Nikmati halaman Error baru untuk blog Anda

PENTING Beberapa fitur dari halaman kesalahan diimplementasikan pada blog ini tidak akan tersedia untuk Anda (gaya kotak pencarian, beberapa perubahan lain yang berbeda.)

source : http://artistutorial.blogspot.ro/2012/11/add-excelent-html5-404-error-page-to.html

Share this post