Cara Membuat Fanspage Like Box Slider Ala SeoCips

Bagikan :

Tweet

Hai Sobat, kali ini saya akan share " Cara Membuat Fanspage Like Box Slider Ala SeoCips ". Cara ini cocok bagi anda jika bosan dengan popup like box / kotak fanspage like box.
Mau tau caranya... Langsung Ke Tutorialnya Saja...

Cara Membuat Fanspage Like Box Slider Ala SeoCips

1. Masuk Ke Beranda Blogger > Tata Letak > Tambahkan Widget > HTML/Javascript
2. Masukkan Kode Di Bawah Ini

Untuk Sisi Kiri Ke Kanan

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

Untuk Sisi Kanan Ke Kiri

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

3. Klik Simpan

Tag : HTML, Javascript, Widget