Cara Membuat Fanspage/Likebox Facebook Menggunakan Efek Slide di BLog

Cara Membuat Fanspage/Likebox Facebook Menggunakan Efek Slide di BLog - Semalam pagi sohib Bejo Cius, dikesempatan kali ini saya akan membagikan cara membuat widget Fanspage Likebox Facebook Fixed dengan efek slide menggunakan kode CSS Keyframe. Mungin banyak diantara kalian yang bingung dan ingin sekali membuat widget yang sepeti ini, karena selain tampilannya dinamis dan minimalis tentunya widget ini juga tidak memakan tempat.

Untuk widget yang satu ini sebenarnya tidak ada spesialnya, karena sebenarnya seperti widget pada umumnya hanya saja disini ditambahkan efek CSS Keyframe sehingga menghasilkan efek slide, dan anda juga bisa mengatur dari mana widget ini akan muncul, misalnya, apakah dari kiri, kanan, atau bawah dan anda pun juga dapat mengatur waktu untuk pergerakan slide-nya. Widget yang menggunakan kode CSS lebih sangat menguntungkan dari pada menggunakan kode Javascript karena sangat ringan tentunya.

Berikut Cara Membuat Fanspage Facebook Menggunakan Efek Slide di Blog.

• Tentunya anda sudah memiliki Fanspage Facebook (jika belum punya anda bisa membaca : cara membuat Fanspage Facebook)
• Silahkan anda masuk ke blogger
• Lalu pilih "Tata letak - Tambahkan Gadget/Widget - lalu pilih Html/JavaScript"
• Setelah itu silahkan masukkan kose di bawah ini (pilih salah satu saja dari dua kode dibawah ini)

* Slide dari kanan ke kiri

<style>
/*Fixed Facebook Like Box Bejo Cius*/
.fb-btn-bejocius {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-bejocius {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-bejocius a:link, .fb-btn-seocips a:visited {color:#ffcc00;}
.fb-btn-bejocius a:hover {color:#fff;}
.fb-btn-bejocius2 {background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s}
.fb-btn-bejocius2 {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=769772066467683";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-btn-bejocius">
<div class="fb-btn-bejocius2">
<div class="fb-page" data-href="https://www.facebook.com/bejocius/" 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/bejocius/"><a href="https://www.facebook.com/bejocius/">bejocius.blogspot.com</a></blockquote></div></div>
</div>
</div>

* Slide dari kiri ke kanan

<style>
/*Fixed Facebook Like Box Bejo Cius*/
.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-bejocius {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-bejocius a:link, .fb-btn-bejocius a:visited {color:#ffcc00;}
.fb-btn-bejocius a:hover {color:#fff;}
.fb-btn-bejocius2{background:rgba(1, 0, 1, 0.3);-moz-animation:kanan 15s;-webkit-animation:kanan 15s;animation:kanan 15s}
.fb-btn-bejocius2 {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=769772066467683";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-btn-bejocius">
<div class="fb-btn-bejocius2">
<div class="fb-page" data-href="https://www.facebook.com/bejocius/" 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/bejocius/"><a href="https://www.facebook.com/bejocius/">bejocius.blogspot.com</a></blockquote></div></div>
</div>
</div>

• Ganti kode yang berwarna merah diatas dengan alamat Url/Link Fanspage Facebook anda.
• Setelah itu klik "Save"

Demikianlah Cara Membuat Fanspage/Likebox Facebook Menggunakan Efek Slide di BLog. Selamat mencoba dan semoga berhasil, jika ada yang masih kesulitan jangan sungkan-sungkan untuk bertanya dan meninggalkan komentar. Happy Blogging :)

Share :

Tweet

✚

Related Post