Error 404 Page Not Found
Tentu tidak menyenangkan bila kamu mengunjungi sebuah situs halaman dan mendapati kesalahan 404 Page Not Found. Hal ini dikarenakan kesalahan URL, masalah indeks, atau halaman yang kamu cari sudah dihapus oleh pemilik situs.
Tutorial Blog: Cara Membuat Halaman Error 404
Instalasi
Masuk Blogger: Tema > Edit HTML
Tambahkan kode berikut ini sebelum kode
</head><b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
/* CSS Error 404 */
#xxx {
background: #000;
text-align: center;
margin-bottom: 50px;
font-weight: 400;
font-size: 20px;
position: fixed;
width: 100%;
height: 100%;
line-height: 1.5em;
z-index: 9999;
left: 0
}
#error-text {
top: 20%;
position: relative;
font-size: 40px;
color: #000
}
#error-text a {
color: #000
}
#error-text a:hover {
color: #fff
}
#error-text p {
color: #eee;
margin: 50px 0 0
}
#error-text i {
margin-left: 10px
}
#error-text p.bth {
margin: 20px 0 0
}
#error-text span {
position: relative;
background: #000;
color: #fff;
font-size: 300%;
padding: 0 20px;
border: 5px solid #fff;
font-weight: bolder;
transition: all .5s;
cursor: pointer;
margin: 0 0 40px
}
#error-text span:hover {
background: #fff;
color: #000;
-webkit-animation: jelly .5s;
-moz-animation: jelly .5s;
-ms-animation: jelly .5s;
-o-animation: jelly .5s;
animation: jelly .5s
}
#error-text span:after {
top: 105%;
left: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136,183,213,0);
border-top-color: #fff;
border-width: 7px;
margin-left: -7px
}
.back:active {
-webkit-transform: scale(.95);
-moz-transform: scale(.95);
transform: scale(.95);
background: #000;
color: #fff
}
.back:hover {
background: #000;
color: #fff;
border: 3px solid #fff;
}
.back {
text-decoration: none;
background: #fff;
color: #000;
padding: 10px 20px;
font-size: 20px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
transition: all .5s ease-out
}
@-webkit-keyframes jelly {
from,to {
-webkit-transform: scale(1,1);
transform: scale(1,1)
}
25% {
-webkit-transform: scale(.9,1.1);
transform: scale(.9,1.1)
}
50% {
-webkit-transform: scale(1.1,.9);
transform: scale(1.1,.9)
}
75% {
-webkit-transform: scale(.95,1.05);
transform: scale(.95,1.05)
}
}
@keyframes jelly {
from,to {
-webkit-transform: scale(1,1);
transform: scale(1,1)
}
25% {
-webkit-transform: scale(.9,1.1);
transform: scale(.9,1.1)
}
50% {
-webkit-transform: scale(1.1,.9);
transform: scale(1.1,.9)
}
75% {
-webkit-transform: scale(.95,1.05);
transform: scale(.95,1.05)
}
}
@media only screen and (max-width:640px) {
#error-text span {
font-size: 200%
}
#error-text a:hover {
color:#fff
}
}
</style>
</b:if>
Kemudian tambahkan kode berikut ini tepat setelah kode
<body><b:if cond='data:blog.pageType == "error_page"'>
<div id='xxx'>
<div id='error-text'>
<span>404</span>
<p>PAGE NOT FOUND</p>
<p class='bth'><a class='back' expr:href='data:blog.homepageUrl'>Back To Home</a></p>
</div>
</div>
</b:if>Simpan Tema