Membuat Fanspage/Likebox Facebook Efek Slide di Blog

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.

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 Anisuka*/
.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“>anisuka.com</a></blockquote></div></div>
</div>
</div>

DEMO SHOW

-Dari kanan ke kiri

<style>
/*Fixed Facebook Like Box Anisuka*/
.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“>anisuka.com</a></blockquote></div></div>
</div>
</div>

DEMO SHOW

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

Lihat juga widget Facebook Lainnya:

• Cara membuat popup likebox Facebook
• Like Box Effect Tooltip di Blog

Kamu bisa mengganti isi dari widget ini yang sebelumnya isinya script fanspage facebook dengan widget lain misalnya.

Diposkan oleh

Brando Mewo

You Might Also Like: