Home / Blogger / Tutorial / Cara Menambahkan Halaman Error Pada Blog

Cara Menambahkan Halaman Error Pada Blog

,
Ayung Avis™ - Mungkin kita pernah merasakan rasa jengkel jika melihat web atau halaman yang ingin kita buka pada browser mengalami masalah Error 404 (yang artinya halaman tersebut tidak ada atau sudah dihapus). Tetapi jika penampilan halaman Error 404 itu sangat indah, maka akan membuat para pengunjungnya terkesan untuk mempunyai halaman Error 404 yang seperti itu. Seperti yang tertera pada judul artikel ini, kali ini saya mempostingkan Bagaimana cara menambahkan Halaman Error 404 pada Blog. Jika anda ingin menambahkan tampilan halaman Error 404 pada blog anda seperti yang tertera pada gambar atau demo, silahkan ikuti beberapa langkah-langkah di artikel ini. Menurut saya sih, langkah-langkahnya tidak terlalu suilt bagi para profesional blogger. Tapi bagi para amatir blogger memang terlihat sulit tapi kita tidak akan tahu kesulitannya jika kita belum mencobanya. Berikut langkah-langkahnya :

 1. Log in ke Dashboard blog anda.
2. Setelah itu pergi ke Template > Edit HTML > Proceed.
3. Temukan kode <body> pada HTML anda dan jika sudah ketemu, paste kode di bawah ini tepat setelah kode <body>.

<!-- 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(http://2.bp.blogspot.com/-IrtT9KYegqU/UKolFaO0l5I/AAAAAAAADCY/_ByPBs35C18/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(http://2.bp.blogspot.com/-7iRUCYrxbSA/Ti7CXjrPM6I/AAAAAAAACv4/_QNnlIcffZ0/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>


4. Jika sudah, paste kode di bawah ini sebelum 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>

 5. Setelah itu, temukan kode <b:includable id='main' var='top'> dan paste kode di bawah ini setelah kode tersebut.
<b:if cond='data:numPosts == 0'>
<data:navMessage/>
</b:if>

 6. Save template anda.

Itu tadi adalah tutorial bagaimana cara menambahkan halaman error 404 pada blog anda. Silahkan anda mencobanya dan jika anda menemukan kesulitan pada blog anda, anda dapat berkomentar pada artikel ini mengenai masalah yang anda hadapi. Semoga bermanfaat.


Terima Kasih 
Cara Menambahkan Halaman Error Pada Blog Cara Menambahkan Halaman Error Pada Blog Reviewed by Ayung on 12/09/2012 Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.