Box ini akan terlihat / jatuh ketika jquery selesai di load, mungkin ada yang merasa terganggu dengan box ini namun mungkin juga ada yang mungkin mau memanfaatkan box ini..? yah itu kembali kepada diri sendiri, namun dari pada anda pensaran mending langsung liat demonya aja yah.
DEMO
Jika anda sudah melihat demonya sekarang sudah tau kan maksud dari Box melayang / jatuh dari atas. postingan ini hanyalah sedikit modifikasi dari postingan bang Taufik dimana disini saya menambahkan efek jquery UI yang membuat efek mental - mental nya itu.
1. Masukan kode css di bawah ini di atas kode
]]></b:skin>#kotak-pesan{
position:fixed !important;
position:absolute; /* IE6 */
top:-900px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:10px;
background:#0a0;
border:2px solid #080;
font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}
#kotak-pesan a.close{
position:absolute;
top:-10px;
right:-10px;
background:#0c0;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000;
border:2px solid #ddd;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}2. Masukan script di bawah ini di atas kode
</head><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-pesan').animate({top:"190px"}, 1000, "easeOutBounce");
// hilangkan kotak pesan saat tombol (x) diklik
$('a.close').click(function() {
$(this).parent().slideUp(800, "easeOutBounce");
return false;
});
});
</script>
Jika di template anda ada kode jquery jangan anda kopi kode yang bergaris bawah itu, cukup kode yang di bawahnya saja.
3. Simpan kode html di bawah ini Di bawah kode
<body><div id='kotak-pesan'> DISINI KONTEN ADA <a class='close' href='#'>x</a> </div>
Setelah itu klik Pratinjau lalu lihat hasilnya. jika box nya muncul berarti triknya berhasil kalau belum berhasil coba pelan2 baca tutorialnya.
