Cara Membuat Kotak Pesan Dengan Efek jQuery

Cara Membuat Kotak Pesan Dengan Efek jQuery - Halo Sobat, Gimana Kabarnya ?
Kali Ini Saya Mau Posting Tentang Tutorial Blog Yaitu : 'Cara Membuat Kotak Pesan Dengan Efek jQuery'
Efek jQuerynya Adalah Ketika Kotak Pesan Itu Muncul Maka Background / Latar Belakangnya menjadi Gelap, Dan Setelah KOtak Pesan Itu Di Close / Tutup Maka Akan Terang Kembali..

Demo

Berikut Turtorialnya :

1. Login Blogger
2. Tata Letak
3. Tambah Gadget
4. HTML/JavaScript
5. Copy Kode Dibawah, Paste Di Form HTML/JavaScript


<style type='text/css'>
/* Message Box by Monster Zila */
#box-message{
position:fixed;
left: 35%;
padding: 10px;
background:
white;
box-shadow: 0px 1px 3px
rgba(0, 0, 0, 0.4);
right: 30%;
width: 300px;
top: 35%;
z-index: 9999;
}

#box-message:after {background: rgba(0, 0, 0, 0.77);content: '';position: absolute;top: -500%;bottom: 0;right: 0;left: -500%;z-index: -1;width: 1000%;height: 1000%;}
#box-message a.close{
position:absolute;
top: 0;
right: 0;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
border-radius:22px;
cursor:pointer;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'></script>

<script type='text/javascript'>
$(window).bind("load", function() {
// Animasikan Nilai Top Saat Halaman Telah Selesai Dimuat
$('#box-message').animate({top:"190px"}, 1000, "easeOutBounce");
// Hilangkan Message Box Saat Tombol (x) Diklik
$('a.close').click(function() {
$(this).parent().slideUp(800, "easeOutBounce");
return false;
});
});
</script>

<div id='box-message'>
<!-- Kode Yang Ingin Di Tampilkan Disini -->
<a class='close' href='#'>&#215;</a>
</div>



Keterangan !!! :

• Ganti Kode <!-- Kode Yang Ingin Di Tampilkan Disini --> Dengan Kode Yang Mau Di Tampilkan Di Kotak Pesan Tersebut
• Jika Sudah Ada Kode Yang Bergaris Bawah, Maka Tidah Usah Memakai Kode jQuery Tersebut

6. Simpan Gadget

Jika Sobat Mau Mencopy / Menyebarluaskan Artikel Ini Harap Cantumkan Link Sumber Dari BLog Ini !!

Semoga Bermanfaat

Share 'Cara Membuat Kotak Pesan Dengan Efek jQuery' On ...

Cara Membuat Kotak Pesan Dengan Efek jQuery 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.