Membuat Halaman Error Page 404 - Dalam tutorial kali ini kita akan membuat halaman Error Page 404 menjadi lebih keren dan stylish sekali .
Tutorial ini saya dapat dari Artistutorial.blogspot.com barusan , dan menurut saya ini bagus sekali untuk diterapkan di blog .
Info :
Halaman ini akan muncul jika tidak ditemukan URL valid dalam blog anda , bukan tidak ditemukan artikel yang cocok . Misal http://goblogination.blogspot.com/404
Oke , sekarang mari kita membuatnya ..
Cara Membuat Halaman Error 404
Cari kode
<body> dan letakkan code ini dibawah nya
<!-- 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/AVvXsEhF5OVgxH3abk0xCvsy6XEy6fccJNPUoDkN-SnqI6QI-SxsATTCj2-Plf706weXUS5JYo7ktKZixeeN9_eym666_v5UKqtpGQe90X5KAvsPnzBWmpWnGwCuu6lNqfjLtKu3JeszTc_STyY/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/AVvXsEhBpZvQvcB4KLSe_5yGrMb62xfAW4HCR-T0X9za-6rmV0dXcyY3WylgUXzBNO3rY05GSgll5f2AShwsviQMaEXr7O1CP403tYemLU8rlYNh6pTtfnfnF-UXyX4CatZOWR76v0WcxEMH02s/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> Letakkan script dibawah ini tepat diatas 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>Selanjutnya cari kode
<b:includable id='main' var='top'>Letakkan kode dibawah ini tepat dibawahnya
<b:if cond='data:numPosts == 0'>
<data:navMessage/>
</ b: if> Klik simpan . Selesai .
Untuk mengaksesnya ketikkan
/404 setelah url blog untuk mencoba .
2 comments
template nya keren sob, tutorialnya juga keren sih :D
Thanks sob
Berikan komentar anda tanpa menyisipkan tautan aktif. Terimakasih