Membuat MessageBox lebih hidup

Home » , , » Membuat MessageBox lebih hidup
0 comments
Selamat Pagi semuanya..

Pagi yang dingin ini daripada tiduran terus mendingan update di blog aja biar blognya tambah rame pengunjung.
Kali ini kita akan membahas bagaimana membuat Message Box atau kotak pesan menjadi lebih hidup dan dinamis. Bagaimana cara membuatnya seperti gambar diatas? Disinilah jawabannya.

Bahan-bahan:
Setelah semuanya sudah dimiliki, lanjutkan ke bagian pengkodingan
Buat file index.html, ketikan kode berikut
<!DOCTYPE html>
<html>
<head>
    <title>Message Box by Maful Prayoga Arnandi</title>
</head>
<body>

</body>
</html>
pada kode diatas kita menggunakan HTML5
Selanjutnya buat file style.css untuk mempercantik message box
.ok{
 background: #F6FFEC;border: 
 1px solid #89B755; 
 border-radius: 3px; 
 margin: 20px 15px;
 padding: 1px;
}

.ok p{
 background: #DFF6C5 url(ok.png) no-repeat 4px center; 
 color: #496528; 
 margin: 0; 
 padding: 7px 25px;
}

.warning{
 background: #FFF7CE;
 border: 1px solid #D9C65B; 
 border-radius: 3px; 
 margin: 20px 15px;
 padding: 1px;
}

.warning p{ 
 background: #FDF0B1 url(warning.png) no-repeat 4px center; 
 color: #756B30; 
 margin: 0; 
 padding: 7px 25px;
}

.error{
 background: #FDE4E1;
 border: 1px solid #B16A6C; 
 border-radius: 3px; 
 margin: 20px 15px;
 padding: 1px;
}

.error p{
 background: #F4CAC6 url(error.png) no-repeat 4px center; 
 color: #630E18; 
 margin: 0; 
 padding: 7px 25px;
}
Ubah nama ikon ok.png, warning.png, dan error.png sesuai nama ikon yang kalian miliki.
Untuk memanggil style.css di index.html tambahkan kode dibawah tag <title> 
<link rel="stylesheet" type="text/css" href="style.css">
jika sudah, dilanjutkan membuat bagian Message Box nya dengan menggunakan class pada css, tambahkan kode berikut diantara tag <body>
<div class="ok"><p>Message Box success.</p></div>
<div class="warning"><p>Message Box warning.</p></div>
<div class="error"><p>Message Box error.</p></div>
Akhirnya,selesai juga kita membuatnya, untuk melihat hasilnya double klik pada index.html
.
Share this article :