Tạo hộp thông báo với JQuery

Demo :

Một thủ thuật Blog phù hợp cho bạn để tạo ra 1 bản thông báo hay gắng 1 tiện ích kèm theo. 

1. Trong giao diện Chỉnh sửa HTML (Edit HTML) tìm đến thẻ ]]></b:skin>. Dán toàn bộ code ngay phía trước nó :

#kotak-pesan { position:fixed !important; position:absolute; /* IE6 */ top:-1000px; left:50%; width:300px; margin:0 0 0 -182px; height:auto; padding:16px; background-color:#E9CF5F; border:2px solid white; font:normal normal 1em/normal Georgia,Serif; color:#111; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4); -moz-box-shadow:0 1px 3px rgba(0,0,0,.4); box-shadow:0 1px 3px rgba(0,0,0,.4);}#kotak-pesan a.close { position:absolute; top:-10px; right:-10px; background-color:#333; font:normal bold 16px Arial,Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:white; border:2px solid white; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4); -moz-box-shadow:0 1px 2px rgba(0,0,0,.4); box-shadow:0 1px 2px rgba(0,0,0,.4); -webkit-border-radius:22px; -moz-border-radius:22px; border-radius:22px; cursor:pointer;} 

Tiếp theo bạn dán đoạn code sau vào ngay phía trên thẻ </head>

<script type='text/javascript'>$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat $('#kotak-pesan').animate({top:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) diklik $('a.close').click(function() { $(this).parent().fadeOut(); return false; });});</script>

Thêm vào trước thẻ </body> code sau :

<div id='kotak-pesan'>Dòng thông báo tại đây<a class='close' href='#'>&times;</a></div> 

Nguồn: www.dte.web.id