Beranda » Blogging Tips » MEMBUAT OBJEK JATUH DENGAN JQUERY

MEMBUAT OBJEK JATUH DENGAN JQUERY

Ditulis oleh: -

MEMBUAT OBJEK JATUH DENGAN JQUERY


Tutorial kali ini akan menjelaskan bagaimana cara membuat objek jatuh dari atas dengan jQuery. Bingung juga bikin judulnya... :)



Yang pasti objek tersebut bisa diisi apa saja. Baik gambar, Email subscription, Facebook LikeBox, Buku Tamu, atau apa pun ter serah anda.


Masih bingung? kurang lebih screen shootnya seperti dibawah ini (dikasih cewe cantik aja biar ga bosen):

Ini dia tutorialnya gan :



Langkah ke-1



1. Login ke Blogger

2. Edit HTML

3. Cari kode </head>
4. Simpan kode ini di atas kode </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></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>
<style>
#kotak-pesan{
position:fixed !important;
position:absolute; /* IE6 */
top:-900px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:10px;
background:#E9CF5F;
border:2px solid #fff;
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:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-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;
}
</style>

5. Simpan



Langkah ke-2




1. Masuk ke Rancangan

2. Tambah widget HTML/JavaScript
3. Contoh kode pada demo
<div id='kotak-pesan'>
DISINI KONTEN ADA,
k, atau Sesuka Hati Anda
<img src="http://
Bisa Iklan, Facebo
o4.bp.blogspot.com/-UUcnp0SJVyE/T35c3R2M_BI/AAAAAAAAAG4/ZZNZKgUn2Yk/s1600/cewe.jpg" width="289" />
<a class='close' href='#'>&times;</a>
</div> 
Silahkan ganti kode di atas sesuka anda kemudian Simpan

Artikel terkait :

1 komentar :