Modifikasi Error Page di Blogger

Baiklah kali ini saya akan membagikan sebuah tutorial blogger yaitu untuk mengganti tampilan error page dengan style HTML5 dan CSS3 yang tentunya lebih cantik dari tampilan default blogger. Tunggu dulu??? Apa itu error page?
Error page adalah halaman web/blog akan ditampilkan apabila sebuah URL atau Link yang dituju pada web/blog tidak diketahui. OK, langsung saja ke langkah-langkah pembuatannya.

Berikut ini langkah-langkah pembuatannya:

1. Login ke Dashboard -> Template -> Edit HTML.
2. Cari (Ctrl+F) kode ]]></b:skin>.
3. Paste kode berikut ini diatasnya.

.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/AVvXsEj6ASx5b7rx56BGowrOC5n31sd6Ddf_hQ6Un2HPvFRTpoJ3aKP4ZBL_TWftlyKTkAlDtJY93pj7LPQ9mkC1a4f-5cNatTdhN6eFqwRnVTcxVf4VkqP-Ea3sXevC7n_Ln_ePUa5-1j_-NyY/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/AVvXsEjrC6IAYEnviQhT6wXh3Dv7UqFX9fQgTRoMtAQezF7URywbA5Vc3ozrzyeKxy4u4utLIzDUWrCZjsoT-2JjzIjGekDUQo7rB4gYdTSZ2IAlvNXGYgNfjT2TTUM5QtT1ul3wwPuAyeKXZsM/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; }

4. Cari (Ctrl+F) kode </head> dan diatasnya paste kode berikut.
5. Cari kode <b:includable id='main' var='top'> dan dibawahnya paste kode berikut ini.
6. Yang terakhir cari kode <body> dan paste kode berikut dibawahnya.

Page not found












go to homepage

Lihat contohnya disini.