Membuat Message Box Lebih Hidup

12 views

Setelah sekian usang tidak upload tutorial di jaco, hasilnya sempat juga

Selamat Pagi sobat JACO biar sehat semua ya

Kali ini kita akan menciptakan sebuah Message Box atau kotak pesan menjadi lebih berwarna dan lebih hidup. Lalu bagaimana cara kita membuatnya? Mari kita mulai bersama

Bahan-bahan:

Setelah semuanya dimiliki, mulai ke pengkodingan

Buat file index.html dan masukan instruksi berikut

<!DOCTYPE html><html><head><title>Message Box by Maful Prayoga Arnandi</title></head><body> </body></html>

Kemudia untuk mempercantik Mesage Box, buat file css dengan nama style.css

.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 dengan ikon yang sobat miliki.

untuk memanggil file css tambahkan instruksi setalah tag <title>

<link rel="stylesheet" type="text/css" href="style.css">

jika sudah, dilanjutkan menciptakan bab Message Box nya dengan memakai class pada css, tambahkan instruksi 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 selsesai juga, untuk melihat hasilnya double klik pada file index.html

Author: 
    author
    No related post!