Pertama.
Siapkan text editor sepeti Notepad ++, Sublime, Dreamweaver, dan lain-lain. setelah software text editor sudah ada kita lanjut pada tahap berikutnya.
Kedua.
oke, pada tahap ini silahkan cari referensi Page Not Found di Themeforest.com misalnya atau di web misalnya. eiits, tapi usahakan jangan save page as di themeforest. memang menggiurkan karena designnya pun bagus dan simple namun anda harus membuatnya sendiri.
Ketiga.
Pada tahap ini, silahkan anda cari backgroun yang pas untuk page anda nanti, yang simple. misalnya kalo punya saya pake background papan tulis.
Keempat.
Nah silahkan Koding dengan sepengatahuan anda, kita mulai dari tag HTML di akhiri tag /HTML, ya memang itu :D. eh kebanyakan basa basi. lanjut.
Struktur penulisan Tag pada text editor bisa seperti ini :
<html>penulisan sengaja dibuat agak menjorok kedalam untukmemudahkan semisal kuarang penutup tag, langsung ketahuan.
<head>
<title> </title>
</head>
<body>
</body>
</html>
Kelima.
contoh koding kurang lebih seperti ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dono: 404 NOT FOUND</title>
</head>
/* CSS */
<style type="text/css" media="all">
.background {
background:url(img/Blackboard.jpg) repeat; << Ganti BACKGROUND
background-position: center center;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
body {
font-family: 'Bebas', Gadget, sans-serif;
width:100%;
height:100%;
margin: 0;
}
.logo {
margin: 60px 0 20px;
position:relative;
display: inherit;
font-size: 100px;
line-height: 120px;
}
.navigation {
margin-top:10px;
font-size: 16px;
position: relative;
display: block;
line-height: 18px;
}
.navigation a{
text-decoration: none;
-o-transition:all .3s;
-moz-transition:all .3s;
-webkit-transition:all .3s;
-ms-transition:all .3s;
}
.navigation a:hover {
color:#00d2ff;
}
.slash {
margin: 0 4px;
display: inline;
}
.social {
margin:5 10px;
margin-top:80px;
margin-bottom:20px;
display:inherit;
}
.light, .light a {
color: #fff;
}
.copy {
width: 100%;
position: relative;
display: block;
margin-bottom: 40px;
padding-top:inherit;
padding-left:10;
}
.navi {
font-size: 14px;
position: relative;
display: block;
line-height: 18px;
}
.navi a{
text-decoration: none;
-o-transition:all .3s;
-moz-transition:all .3s;
-webkit-transition:all .3s;
-ms-transition:all .3s;
}
.navi a:hover {
color:#00d2ff;
}
.text{
color:#FFF
}
</style>
/* --end of CSS */
<body>Nah seperti itu kurang lebih, Hasil punya saya seperti diatas.
<div class="background">
<div class="container">
<div class="row">
<header class="span12">
<div class="logo light">
<p>Error!</p>
<h1>sorry the page you are looking for.. does not exist.</h1>
<h4>you can explore our site back to the navigation below.</h4>
</div>
</header>
</div>
<div class="row span12">
</div>
</div>
<div class="row span12">
<div class="copy light navi" align="right">Copyright © 2014 <a href="#">21</a></div>
</div>
</div>
</body>
</html>
Untuk CSS bisa di edit sendiri. caww salam hangat :D
0 Komentar untuk "Cara Membuat Page 404 Not Found"