Cara Membuat Widget Melayang Like FB Page Efek Slide

"widget facebook fanspage like floating button ini bermanfaat untuk memperbanyak like halaman facebook, tampilan yang simple dan ada tombol close."

YZG 10 February

Cara Membuat Tombol Like Melayang Fanspage Facebook Efek Slide, kembali lagi catatandroid membahas tips blogging, kali ini yang akan kita bahas adalah elemen widget tambahan dengan fungsi utama adalah membuat facebook fanspage floating button with slide effect.

Tutorial widget floating like fb page button ini catatandroid dapat dari blognya agan zuamsyah dengan alamat zuamsyah.id, thanx to him! widget tombol like melayang halaman facebook ini sangat simple karena hanya menampilkan thumbnail foto, nama fanspage facebook, dan tombol like saja namun dengan efek sliding yang futuristik.

Cara Pasang Widget Facebook Page Melayang di Blog

Sebelumnya sobat harus mempunyai Fanpage Facebook
Buka Blogger Klik Tata Letak (Layout)
Tambah Gadget/Widget pilih Html/Javascript
Masukan kode di bawah ini (pilih salah satu, sesuai selera)

Posisi Bawah Kanan Original By Zuamsyah

Demo:

Code:


<style>
#close { 
  float:left; 
  display:inline-block; 
  padding:1px 6px; 
  background:#A0A0A0; 
  cursor:pointer; 
} 
/*Fixed Facebook Like Box Zuamsyah*/ .fb-btn-zuamsyah {
  background:rgba(1, 0, 1, 0.2);
  margin:0;
  padding:0;
  text-align:center;
  position:fixed;
  bottom:1%;
  left:0.5%;
  z-index:9999;
  box-shadow:0 3px 4px #444;
  border:1px solid #ccc;
  display:block;
  -moz-animation:atas 10s;
  -webkit-animation:atas 10s;
  animation:atas 10s;
} 
.fb-btn-zuamsyah {
  padding:5px ;
  color:#fff;
  font-size:120%;
} 
.fb-btn-zuamsyah a:link, .fb-btn-zuamsyah a:visited {
  color:#ffcc00;
} 
.fb-btn-zuamsyah a:hover {
color:#fff;
} 
.fb-btn-zuamsyah2{
  background:rgba(1, 0, 1, 0.3);
  -moz-animation:kiri 15s;
  -webkit-animation:kiri 15s;
  animation:kiri 15s
} 
.fb-btn-zuamsyah2 {
  padding:3px ;
  color:#fff;
  font-size:120%;
} 

@-webkit-keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @-webkit-keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } @keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } </style> 
<script>
window.onload = function(){ document.getElementById('close').onclick = function(){ this.parentNode.parentNode.parentNode .removeChild(this.parentNode.parentNode); return false; }; }; 
</script>
<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/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-btn-zuamsyah">
<span id="close">x</span>
<br />
<div class="fb-btn-zuamsyah2">
<div class="fb-page" data-adapt-container-width="true" data-height="125" data-hide-cover="true" data-href="https://www.facebook.com/catatandroid" data-show-facepile="false" data-show-posts="false" data-small-header="true" data-width="200">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/catatandroid">
<a href="https://www.facebook.com/catatandroid">catatandroid.com</a>
</blockquote>
</div>
</div>
</div>
</div>

Posisi Bawah Kiri Reedited by CatatanDroid

Demo

Whats edited?

sisi kiri
efek slide lebih cepat

Code:


<style>
#close { 
    float:left; 
    display:inline-block; 
    padding:1px 6px; 
    background:#A0A0A0; 
    cursor:pointer; 
} 
/*Fixed Facebook Like Box Zuamsyah*/ 
.fb-btn-zuamsyah {
    background:rgba(1, 0, 1, 0.2);
    margin:0;
    padding:0;
    text-align:center;
    position:fixed;
    bottom:1%;
    left:0.5%;
    z-index:9999;
    box-shadow:0 3px 4px #444;
    border:1px solid #ccc;
    display:block;
    -moz-animation:kiri 5s;
    -webkit-animation:kiri 5s;
    animation:kiri 5s;
} 
.fb-btn-zuamsyah {
    padding:0px ;
    color:#fff;
    font-size:120%;
} 
.fb-btn-zuamsyah a:link, .fb-btn-zuamsyah a:visited {
    color:#ffcc00;
} 
.fb-btn-zuamsyah a:hover {
    color:#fff;
}
.fb-btn-zuamsyah2 {
    background:rgba(1, 0, 1, 0.3);
    -moz-animation:kiri 5s;
    -webkit-animation:kiri 5s;
    animation:kiri 5s
} 
.fb-btn-zuamsyah2 {
    padding:2px ;
    color:#fff;
    font-size:120%;
} 
@-webkit-keyframes atas{from{transform:translate(0px, -3000px)}to{transform:translate(0px,0px)} } @keyframes atas{ from{transform:translate(0px, -3000px)} to{transform:translate(0px,0px)} } @-webkit-keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } @keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } </style>
<script>
window.onload = function(){ document.getElementById('close').onclick = function(){ this.parentNode.parentNode.parentNode .removeChild(this.parentNode.parentNode); return false; }; }; 
</script>
<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/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-btn-zuamsyah">
<span id="close">x</span>
<br />
<div class="fb-btn-zuamsyah2">
<div class="fb-page" data-adapt-container-width="false" data-height="125" data-hide-cover="true" data-href="https://www.facebook.com/catatandroid" data-show-facepile="false" data-show-posts="false" data-small-header="true" data-width="230">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/catatandroid">
<a href="https://www.facebook.com/catatandroid">catatandroid.com</a>
</blockquote>
</div>
</div>
</div>
</div>

Ganti tulisan https://www.facebook.com/catatandroid dengan alamat facebook page milik sobat.

Silahkan di coba pada blog sobat, widget facebook fanspage like floating button ini sangat bermanfaat untuk memperbanyak like halaman facebook sobat, dengan tampilannya yang simple dan adanya tombol close menjadikan widget floating like fb page ini tidak begitu mengganggu pengalaman pemgunjung blog dalam berselancar di blog sobat. Jangan lupa share ya! CatatanDroid