Tadi saya sudah mengeshare Trick Cara Membuat Animasi Pada saat Membuka Link Window Yang Bar u , Nah sekarang saya mau sahar...
Tadi saya sudah mengeshare Trick Cara Membuat Animasi Pada saat Membuka Link Window Yang Baru , Nah sekarang saya mau sahare trick lagi neh sob.. mudah mudahan bermanfaat untuk sobat.. oh iya sebelumnya saya melihat dari blog sebelah yaitu css-weaver jadi trick ini menggunakan CSS dan JQUERY, penasaran Seperti apa animasi hasil dari kedua tersebut? oke langsung saja berikut Demonya..
DEMO
coba sobat perhatikan Like Fans Pagenya dan lihat apa yang terjadi ^_^ keren kan, jika sobat ingin mencobanya di blog sobat silahkan ikuti langkah langkahnya berikut ini...
1. Seperti Biasa login dulu Ke blog
2. Template -> Edit HTML -> Cheklis Expand Template Widget
3. Cari kode ]]></b:skin>
4. dan masukan kode berikut ini di atas kode tersebut
#kotak-pesan{
position:fixed !important;
position:absolute; /* IE6 */
top:-1000px;
right:2%;
margin:0px 0px 0px -180px;
width:290px;
height:auto;
padding:10px;
background:#242424;
border:2px solid #242424;
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;
}
5. Setelah Itu Cari Kode </head> lalu Masukan Kode di bawah ini di atas kode </head>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
6. Dan Masukan kode berikut ini di Bawah kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-pesan').animate({top:"91px"}, 9000, "easeOutBounce");
// hilangkan kotak pesan saat tombol (x) diklik
$('a.close').click(function() {
$(this).parent().slideUp(800, "easeOutBounce");
return false;
});
});
</script>
7. Setelah Itu masukan Kode Berikut di di bawah kode <body>
<div id='kotak-pesan'>
<div class='fb-like-box' data-header='true' data-height='300' data-href='http://www.facebook.com/palm_Ben_astro' data-show-faces='true' data-stream='false' data-width='290'/>
<a class='close' href='#'>x</a>
</div>
Keterangan :
ganti Kode berwarna cyan(biru muda) dengan link Facebook Fans Page Sobat
Dan terima kasih kepada css-weaver
