Cara Membuat Bottom Floating Facebook Like Box Widget di Blogger

Cara Membuat Bottom Floating Facebook Like Box Widget di Blogger

Cara Membuat Bottom Floating Facebook Like Box Widget di Blogger | Widget ini, merupakan media untuk menampilkan fanspage facebook di blog kalian. Adanya widget ini, juga bisa meningkatkan traffic visitor blog kalian lho.

Tujuan pemasangan widget bottom floating facebook like box

Ketika seorang pengunjung mengeklik tombol suka pada widget facebook like box ini, otomatis mereka akan selalu mendapati postingan terbaru dari fanspage tersebut di beranda facebook mereka.

Sebelumnya, Saya pernah membuat artikel sama juga, yakni membuat facebook like box yang sederhana. Namun, untuk kali ini, tampilan widget facebook like boxnya akan berada dibagian bawah dan mengambang.

Untuk tutorialnya, simak saja artikel berikut ini.

Membuat Bottom Floating Facebook Like Box Widget di Blogger

  • Login ke akun blogger kalian dulu.
  • Kemudian, kalian klik Tema => Edit HTML => pastekan kode CSS ini sebelum kode ]]></b:skin>.
#open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;}
.close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;}
.slideUp{
animation-name: slideUp;-webkit-animation-name: slideUp; 
animation-duration: 1s;-webkit-animation-duration: 1s;
animation-timing-function: ease;-webkit-animation-timing-function: ease;visibility: visible !important;}
@keyframes slideUp {
 0% {
  transform: translateY(100%);
 }
 50%{
  transform: translateY(-8%);
 }
 65%{
  transform: translateY(4%);
 }
 80%{
  transform: translateY(-4%);
 }
 95%{
  transform: translateY(2%);
 }   
 100% {
  transform: translateY(0%);
 } 
}
@-webkit-keyframes slideUp {
 0% {
  -webkit-transform: translateY(100%);
 }
 50%{
  -webkit-transform: translateY(-8%);
 }
 65%{
  -webkit-transform: translateY(4%);
 }
 80%{
  -webkit-transform: translateY(-4%);
 }
 95%{
  -webkit-transform: translateY(2%);
 }   
 100% {
  -webkit-transform: translateY(0%);
 } 
} 
  • Setelah itu, pastekan kode berikut ini sebelum kode </body>
<div class='slideUp' id='open-fb'>
<a class='close-fb' href='#close-fb-like-box' onclick='hide(&apos;open-fb&apos;)' title='Close'><i class='fa fa-times'/></a>
<div class='fb-like-box 'data-header='false' data-height='62' data-href='https://www.facebook.com/FansHijabers' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFansHijabers&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
</span></div></div>
<script type='text/javascript'>
function show(target){document.getElementById(target).style.display = &#39;block&#39;}
function hide(target){document.getElementById(target).style.display = &#39;none&#39;}
</script>

Konfigurasi:
- Ganti kata FansHijabers dengan username fanspage facebook kalian.
  • Simpan perubahan dan cek hasilnya.

Akhir Kata ...

Sekian artikel tentang cara membuat bottom floating facebook like box widget di blogger. Apabila kalian mengalami kendala, kalian bisa tanyakan hal itu di komentar. Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel