Cara Membuat Facebook Like Box Melayang Dibahagian Bawah Pada Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Diantara media sosial yang sangat popular ialah Facebook, Facebook memiliki banyak kemudahan dan fitur yang membuat ramai orang ingin membuat akun Facebook. Tak terkecuali para Webmaster dan Blogger yang mungkin mereka lebih dahulu memiliki akun Facebook ketimbang laman web atau blog, saya fikir anda pun sering menjumpai widget Facebook baik berupa laman atau akun Facebook dalam berbagai macam gaya. Tetapi umumnya kita melihat banyak yang memasang widget Laman Peminat Facebook atau Facebook Fan Page, widget ini dibuat atau dipasang pada laman web atau blog dengan pertimbangan untuk suatu keperluan. Widget ini berguna untuk menambah fan atau peminat pada laman Facebook yang tentunya mempunyai keuntungan sendiri bagi pemiliknya, jadi tidak lain alasan pemasangan widget ini juga bisa disebut sebagai promosi halaman Facebook.
Widget Facebook Like Box Melayang ini mempunyai fitur:
➥ Responsive pada perangkat desktop, tablet dan mobil
➥ Bentuknya yang mini sangatlah rapi dan tidak meengganggu tampilan blog
➥ Dengan CSS dan JavaScript yang sangat ringan tanpa menggunakan jQuery, Iframe dan Flash sehingga tidak mengganggu aktivitas loading laman web atau blog
➥ Widget ini menampilkan atau menuju ke laman Facebook dengan fitur "target_blank" yang menampilkan laman Facebook ke tab baharu sehingga tidak mengganggu halaman web atau halaman blog yang sedang anda layari
➥ Dilengkapi dengan tombol close sehinga anda atau pelawat boleh menutup tampilan widget ini.

Saya sangat merekomendasikannya untuk anda, untuk resultnya boleh anda lihat pada blog saya ini.
To the point, mari kita ketutorialnya⇨

1. Login ke Blogger ➧ Template ➧ Edit HTML dan cari tag ]]></b:skin> dengan menekan Ctrl+F pada keyboard PC anda, terus letakkan CSS berikut diatas / sebelum tag ]]></b:skin>⇩

/************************************************************************
Bottom Floating Facebook Like Box Responsive By www.BloggerAutodidact.com
************************************************************************/
#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%);
 } 
}

2. Letakkan JavaScript berikut diatas / sebelum tag </body>⇩

<!-- Bottom Floating Facebook Like Box Responsive By www.BloggerAutodidact.com Starts -->
<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/HalamanRasmiRahmatArif' 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%2FHalamanRasmiRahmatArif&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>
<!-- Bottom Floating Facebook Like Box Responsive By www.BloggerAutodidact.com Ends -->

Note: Tukarlah dua tulisan "HalamanRasmiRahmatArif" yang berwarna hijau dengan username laman Facebook anda.

3. Save Template.

4. Alhamdulillaah, tutorial sudah siap.