Baiklah sobat pada kesempatan ini saya akan membagikan widget Fanspage Likebox Facebook fixed dengan efek slide menggunakan CSS keyframe. Beberapa waktu yang lalu ada sahabat blogger yang bertanya bagaimana cara membuat widget seperti ini di blog, karena saya juga sekarang memasang widget ini (Entah sampai kapan, mungkin nanti akan di lepas juga) maka saya bagikan sekarang.

Ini sebenarnya hanya widget biasa yang ditambahkan efek css keyframe yang menghasilkan animasi slide, kamu juga bisa mengatur dari mana widget ini muncul misalnya dari kiri, kanan, atas atau bawah dan berapa waktu yang di perlukan. Animasi dengan CSS mungkin lebih menguntungkan daripada javascript karena lebih ringan tentunya.

Cara Membuat Fanspage Facebook Efek Slide di Blog

Cara Membuat Fanspage Facebook Efek Slide di Blog.

1. Kamu sudah memiliki fanspage facebook.
2. Di Blog kamu.
3. Pilih Tataletak >> Tambahkan Gadget/widget >> Html/JavaScript
4. Masukan kode dibawah ini (pilih salah satu dari 2 kode dibawah ini):

-Dari kiri ke kanan

<style>
/*Fixed Facebook Like Box Seocips*/
.fb-btn-seocips {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;right: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-seocips {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-seocips a:link, .fb-btn-seocips a:visited {color:#ffcc00;}
.fb-btn-seocips a:hover {color:#fff;}
.fb-btn-seocips2{background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s}
.fb-btn-seocips2 {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>
<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-seocips">
<div class="fb-btn-seocips2">
<div class="fb-page" data-href="https://www.facebook.com/seocips" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/seocips"><a href="https://www.facebook.com/seocips">seocips.com</a></blockquote></div></div>
</div>
</div>


-Dari kanan ke kiri

<style>
/*Fixed Facebook Like Box Seocips*/
.fb-btn-seocips {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;left:0.5%;z-index:99999999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 5s;-webkit-animation:atas 5s;animation:atas 5s;}
.fb-btn-seocips {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-seocips a:link, .fb-btn-seocips a:visited {color:#ffcc00;}
.fb-btn-seocips a:hover {color:#fff;}
.fb-btn-seocips2{background:rgba(1, 0, 1, 0.3);-moz-animation:kanan 15s;-webkit-animation:kanan 15s;animation:kanan 15s}
.fb-btn-seocips2 {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 kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}
@keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}
</style>
<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-seocips">
<div class="fb-btn-seocips2">
<div class="fb-page" data-href="https://www.facebook.com/seocips" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/seocips"><a href="https://www.facebook.com/seocips">seocips.com</a></blockquote></div></div>
</div>
</div>


5. Ganti kode berwarna diatas dengan url/link fanspage facebook kamu.
6. Save.

Lihat juga widget Facebook Lainnya:

Kamu bisa mengganti isi dari widget ini yang sebelumnya isinya script fanspage facebook dengan widget lain misalnya.
10 Komentar untuk "Membuat Fanspage/Likebox Facebook Efek Slide di Blog"

makasih sob keren postingannya saya minta ijin pasang di blog saya sob

mlm gan...kalau mau mengubahnya supaya pindah dari kanan kekiri gimana ya caranya...mohon pencerahannya.

Udah diupdate gan, silahkan saja :)`

thnks gan atas pencerahannya....sekarang saya sudah pasang widgetnya diblog saya....

Gambar apa gan? yang di ubah itu link fanspagenya :)

Sedikitpun ga ada yang muncul gan .. waduh bingung

Saya sudah coba di beberapa blog berhasi kok, coba aja lagi mbak.