Home » » Cara Buat LikeBox Facebook Fanpage Efek Slide terbaru 2016

Cara Buat LikeBox Facebook Fanpage Efek Slide terbaru 2016









Tampilan Like box fanpage pada blog saat ini kebanyakan bentuknya sudah lama dan kadaluarsa dan terlalu sederhana. Membuat widget Like fanpage itu memang sangat perlu dan wajib untuk setiap blog dimana saja berada entah itu blog indonesia maupun blog - blog di dunia.

Karena dengan menambahkan widget like fanpage facebook pada blog kita akan memudahkan orang untuk berlangganan berita -berita menarik dari blog kita melalui facebook. Ketika seseorang memberikan "Like" pada sebuah fanpage blog / websire maka orang tersebut akan melihat update berita - berita terbaru dari blog tersebut.

Cara ini memang memberikan efek positif bagi sebuah blog karena dapat meningkatkan traffic kunjungan sebuah blog. Seperti yang kita ketahui bahwa media social facebook mempunyai fitur "bagikan" sehingga artikel dari sebuah blog dapat menyebar dengan cepat terlebih lagi jika orang yang membagikan salah satu artikel mempunyai jumlah teman yang cukup banyak.

Namun pada artikel kali ini saya akan memberikan informasi mengenai cara membuat Like box fanpage facebook yang sangat unik dan dapat meningkatkan jumlah "Like" pada sebuah fanpage. Like box fanpage ini sangat unik karena mempunyai efek slide dari kanan ke kiri dan sebaliknya.

Ketika blog kita dibuka maka akan ada efek animasi melayang dan slide dari kiri ke kanan seperti yang adaa pada blog ini. Tampilanya terbilang sangatlah unik karena gabungan antara siled , animasi bergabung menjadi satu sehingga menghasilkan tampilan yang unik.





Cara membuat like box fanpage facebook efek slide melayang :

1). Pastikan kalian sudah punya facebook fanpage

2). Masuk ke dashboard blog kalian

3). Pergi ke "Tata Letak" 

4). Klik "Tambahkan Gadget"

5). Pilih "HTML/Javascript

6). Lalu kalian pastekan salah satu script dibawah ini :

Catatan : tulisan berwarna merah kalian ganti dan sesuaikan dengan halaman fanpage kalian



- Efek melayang 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/infoajibs" 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/infoajibs"> <a href="https://www.facebook.com/infoajibs">www.informasiajib.info</a></blockquote></div></div>
</div>
</div>




- Efek melayang 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/infoajibs" 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/infoajibs"><a href="https://www.facebook.com/infoajibs">www.informasiajib.info</a></blockquote></div></div>
</div>
</div>


Apabila ada pertanyaan silahkan berkomentar

Terimakasih sudah membaca Cara Buat LikeBox Facebook Fanpage Efek Slide terbaru 2016

« Previous
« Prev Post
Next »
Next Post »