Cara Membuat Message Box (kotak pesan) Keren di Blog
Membuat Box Message (kotak pesan) sangat berguna untuk menampilkan status pesan kepada pengguna/pembaca di situs Anda. Bagi pengembang Aplikasi Web, menggunakan kotak pesan (box message) adalah cara terbaik untuk menampilkan dan menginformasikan pesan sehingga pembaca menerima pesan yang sejelas mungkin tentang apa yang sedang terjadi.
Box Message / message box / alert message box dapat berupa pesan kesalahan (error box message), pesan peringatan (warning box message), pesan informasi ( information box message), pesan sukses/gagal (successful operation box message), pesan pengumuman dst. Penggunaan warna yang berbeda pada box (kotak pesan) juga dapat memperjelas tentang maksud dari status pesan itu sendiri, misalkan: warna merah pada pesan error, situs facebook biasa menggunakan kotak pesan yang mirip dengan type pesan sukses.
Dalam tutorial Desain Blog ini, saya memberikan beberapa contoh Message Box Keren yang dibuat menggunakan CSS dan menambahkan icon cantik didalamnya. Penambahan icon dan warna yang berbeda untuk tiap Status Pesan tentu akan mempertegas isi pesan tesebut.
Information Box Message ( kotak pesan informasi)
Info text message here
CSS code :
.info {
border: 1px solid;
margin: 15px 0px;
padding:15px 20px 15px 55px;
width: 500px;
font: bold 12px verdana;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-shadow: 2px 2px 2px #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 5px;
}
.info {
color: #00529B;
background: #BDE5F8 url('https://sites.google.com/site/problogiz/my-icon/info.png') no-repeat 10px center;
}
HTML :<div class="info">Info text message here</div>
Success Box Message (kotak pesan sukses)
Successful operation text message here
CSS code:
.success {
border: 1px solid;
margin: 15px 0px;
padding:15px 20px 15px 55px;
width: 500px;
font: bold 12px verdana;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-shadow: 2px 2px 2px #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 5px;
}
.success {
color: #4F8A10;
background: #DFF2BF url('https://sites.google.com/site/problogiz/my-icon/ok.png') no-repeat 10px center;
}
HTML :
<div class="success">Successful operation text message here</div>
Warning Box Message (kotak pesan peringatan)
Warning text message here
CSS code :
.warning {
border: 1px solid;
margin: 15px 0px;
padding:15px 20px 15px 55px;
width: 500px;
font: bold 12px verdana;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-shadow: 2px 2px 2px #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 5px;
}
.warning {
color: #9F6000;
background: #FEEFB3 url('https://sites.google.com/site/problogiz/my-icon/warning.png') no-repeat 10px center;
}
HTML :
<div class="warning">Warning text message here </div>
Error Box Message (kotak pesan kesalahan)
Error text message here
CSS code :
.error {
border: 1px solid;
margin: 15px 0px;
padding:15px 20px 15px 55px;
width: 500px;
font: bold 12px verdana;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-shadow: 2px 2px 2px #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 5px;
}
.error {
color: #D8000C;
background: #FFBABA url('https://sites.google.com/site/problogiz/my-icon/dialog_error_3.png') no-repeat 10px center;
}
HTML :
<div class="error">Error text message here</div>
Keterangan :
*Ganti width: 500px; sesuaikan dengan lebar halaman blog Anda.
*Ganti "text message" dengan kata pesan yang akan Anda pasang.
*Gambar icon box message pada kode yang berwarna merah, Anda bisa menggantinya dengan icon/gambar sendiri. Atau bisa menggunakan contoh gambar icon yang lain, saya sediakan dibawah ini :
*Ganti "text message" dengan kata pesan yang akan Anda pasang.
*Gambar icon box message pada kode yang berwarna merah, Anda bisa menggantinya dengan icon/gambar sendiri. Atau bisa menggunakan contoh gambar icon yang lain, saya sediakan dibawah ini :
![check icon](https://sites.google.com/site/problogiz/my-icon/4.png)
![edit icon edit icon](https://sites.google.com/site/problogiz/my-icon/dialog_error.png)
![warning icon warning icon](https://sites.google.com/site/problogiz/my-icon/dialog_warning_2.png)
![info1 icon info1 icon](https://sites.google.com/site/problogiz/my-icon/document_properties.png)
![error2 icon error2 icon](https://sites.google.com/site/problogiz/my-icon/error_2.png)
![info2 icon info2 icon](https://sites.google.com/site/problogiz/my-icon/get_info.png)
![tip icon tip icon](https://sites.google.com/site/problogiz/my-icon/gnome_dialog_information.png)
![warning2 icon warning2 icon](https://sites.google.com/site/problogiz/my-icon/gnome_dialog_warning.png)
![error3 error3](https://sites.google.com/site/problogiz/my-icon/no.png)
![help icon help icon](https://sites.google.com/site/problogiz/my-icon/information2.png)
![warning4 warning4](https://sites.google.com/site/problogiz/my-icon/security_warning.png)
Kalau tertarik dengan pilihan gambar icon yang lebih banyak, silahkan kunjungi di situs: www.findicons.com
So, bagaimana? tertarik memasang Kotak Pesan di blog Anda?
Box Message ini dapat Anda tempatkan di halaman blog, Hompage atau dipostingan, dimana saja Anda mau.
Wait for next cool CSS design !!!
21 komentar
Makasih sob atas informasinya. izin bookmark dulu ya tips ini dan nanti saya praktekkan dan terapkan pada blog saya.. (y)
REPLYsama2 sob, silahkan:)
REPLYbtw tahnks udah mampir
Wahhh... thanks banget ya tutornya. langsung coba ahhhh... :) mudah2an berhasil..
REPLYSama-sama sob. balik lagi nih cuman mau konfirmasi aja kalau blog sobat ini sdh sukses tuh jadi follower ke 21. Kalau berkenan, follow back ya sob... (y)
REPLYok sama2
REPLYsilahkan dicoba pasti bisa:)
iya sob..thanks udah follow blog ini
REPLYsaya udah follow back
wah keren2 icon nya bro, mantep deh :D
REPLYyup thanks Liong:)
REPLYehhe mantap...
REPLYsaya sudah pakai sejak lama.. :D
siiplah mas bro:)
REPLYijin copas di blog ane bro , dengan sedikit tambahan keterangan letak pemakaian css dan htmlnya, dah ane cantumin sumbernya jg
REPLYsalam blogger
Thanks ya kak^^ Hanya saja, maksudnya gimana ya? HTML nya ditaruh disebelah mana.. CSS Code juga. Saya biasa menerima info tutors dengan detil soalnya... Mohon dimengerti karena baru setengah tahun berselancar didunia blogger
REPLYgan tutorialnya udah saya praktekan, tapi gagal, ane coba waktu bikin postingan mode (HTML), terus di pratinjau malah gk bisa, ada pemberitahuan "Required field must not be blank", solusinya gimana gan ?
REPLYterimakasih sudah berbagi, ingin coba pasang saya punya web
REPLYwah keren ni gan, jadi pengunjung web/blogg bisa tau mana pesan yang error
REPLYthanks gan
ini pie carane gan, aku tak faham, maklum belajar blog baru 1 minggu, jelasin dong lankah"nya
REPLYpasang css box message diatas ditemplate sebelum tag ]]></b:skin>:, kemudian gunakan kode HTML diatas untuk memanggilnya , seperti ini : <div class="error">Error text message here</div>
REPLYterimakasih banyak sob, sangat membantu tutorialnya..
REPLYhttp://obattpenyakit.com/
wah wah nice gan
REPLYkere-keren box msg nya..ijin comot kode css nya gan..
REPLYSilahkan Berkomentar
ConvertKomentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan