Pasang Widget Popup Facebook Page Box With EaseOutBounce

Pada sore hari ini saya kembali lagi untuk memberikan tutorial yaitu 'cara Pasang Widget Popup Facebook Page Box With EaseOutBounce' dimana tutorial seperti ini tidak asing lagi bagi sobat. karena anda bisa temui hal seperti ini di website2 teman. jadi tidak ada salahnya jika saya memshare tutorial ini kepada teman2 yang belum tahu atau ingin mengganti fan page box anda dengan yang ini.heheeg,..

baiklah sebelum ke TKP saya hanya ingin memberitahukan kepada teman2 bahwa beberapa hari yang lalu sy juga memposting tutorial serupa yaitu 'Pasang Widget Popup Facebook Page Like Box With Timer' . SO,.. jika sobat tidak suka dengan yang ini maka sobat bisa lht tutorial yang sebelumnya.

Baiklah jika sobat ingin memasangnya silahkan ikuti langkah berikut :
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya.

<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>
<div id='kotak-pesan'>
<div id="fb-root"></div>
<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/en_GB/all.js#xfbml=1&appId=244904908935168";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like-box" data-href="https://www.facebook.com/UttaBlogdOtCom" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="true"></div>
<a class='close' href='#'>&times;</a></div>

5.Terakhir Save, dan Lihat hasilnya. Please rate this article: