Cara membuat Fanspage Likebox Facebook efek slide di Blog

HaiSob apa kabar lagi 😀 ? Baiklah sobat pada kesempatan ini saya akan membagikan widget Fanspage Likebox Facebook fixed efek slide menggunakan CSS keyframe. Beberapa waktu yang lalu ada sahabat blogger yang bertanya bagaimana cara membuat widget seperti ini di blog, 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 lebih menguntungkan daripada menggunakan JavaScript karena lebih ringan tentunya.

Likebox Facebook Page Slide Effect


Cara Membuat Fanspage Facebook Efek Slide di Blog
Likebox Facebook Page Slide Effect

Cara Memasang Fanspage Facebook Efek Slide di Blog


1. Sebelumnya kamu sudah membuat atau sudah memiliki Facebook Page.
2. Di Blog kamu 😄
3. Pilih menu Tata Letak  ➜ Tambahkan Gadget.
4. Kemudian pilih widget HTML/JavaScript

Cara Membuat Fanspage/Likebox Facebook Efek Slide di Blog
Tata Letak ➔ Tambah Gadget ➔ HTML / Javascript

5. Masukan kode dibawah ini (pilih salah satu dari 2 kode dibawah ini):

Efek Slide dari kiri ke kanan

<style>
/*Fixed Facebook Like Box haisob*/
.fb-btn-haisob {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-haisob {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-haisob a:link, .fb-btn-haisob a:visited {color:#ffcc00;}
.fb-btn-haisob a:hover {color:#fff;}
.fb-btn-haisob2{background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s}
.fb-btn-haisob2 {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-haisob">
<div class="fb-btn-haisob2">
<div class="fb-page" data-href="https://www.facebook.com/bloghaisob" 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/bloghaisob"><a href="https://www.facebook.com/bloghaisob">haisob.com</a></blockquote></div></div>
</div>
</div>


Efek Slide dari kanan ke kiri

<style>
/*Fixed Facebook Like Box haisob*/
.fb-btn-haisob {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-haisob {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-haisob a:link, .fb-btn-haisob a:visited {color:#ffcc00;}
.fb-btn-haisob a:hover {color:#fff;}
.fb-btn-haisob2{background:rgba(1, 0, 1, 0.3);-moz-animation:kanan 15s;-webkit-animation:kanan 15s;animation:kanan 15s}
.fb-btn-haisob2 {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-haisob">
<div class="fb-btn-haisob2">
<div class="fb-page" data-href="https://www.facebook.com/bloghaisob" 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/bloghaisob"><a href="https://www.facebook.com/bloghaisob">haisob.com</a></blockquote></div></div>
</div>
</div>



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

Sekian cara membuat Likebox Facebook Fanspage efek slide di Blogger, semoga bermanfaat. Salam Bloggers.