Membuat MessageBox lebih hidup

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Assalamu'alaikum warahmatullahi wabarakatuh

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:

ikon ( www.iconarchive.com )
index.html
style.css

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

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com

NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com

atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

wassalamualaikum warahmatullahi wabarakatuh

Artikel Membuat MessageBox lebih hidup, Diterbitkan oleh sourcecodeaplikasi2 pada Kamis, 08 Januari 2015. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.