Cara Membuat Tombol Like Melayang Fanspage Facebook Efek Slide

Cara Membuat Tombol Like Melayang Fanspage Facebook Efek Slide

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 Tombol Like Halaman Facebook Melayang di Blogger(Blogspot)


  • 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)

FB LIKE FLOATING BUTTON 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>

FB LIKE FLOATING BUTTON BAWAH KIRI REEDITED by YanuAbiAlwi

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

Related Posts