Cara Memasang Kotak Like Facebook Melayang Pada Blog

Cara ini adalah kalau kita mempunyai fans pada facebook seperti kotak like fans page facebook pada dasarnya, namun di sini ada sedikit perbedaan karena biasanya kalau kotak like fans page facebook di simpan pada posisi widget, di sini di simpan pada saat selesai loading blog akan muncul kotak melayang facebooknya yang di mana kotak ini akan lebih memudahkan pengunjung agar lebih cepat like facebook kita dan tidak usah mencari widgetnya terlebih dahulu. Di bawah ini adalah contoh gambar kotak like facebooknya.

Naah jika anda tertarik, anda bisa mengikuti langkah-langkah berikut ini.

1.  Jika anda sudah mempunya kotak like facebooknya, Login terlebih dahulu pada blog anda.

2.  Jika sudah masuk menu Dasbor pilih menu >>Tata Letak<< lalu >>Tambahkan Gadget<< dan Pilih >>HTML/javascript<<

3.  Setelah itu copykan kode script di bawah ini pada kotak HTML/javascript

<!-- floating FB like box DP12 -->
<style type='text/css'>
#fblikebox {
  overflow:display;
  position:fixed !important;
  bottom:-1000px;
  left:50%;
  width:300px;
  height:auto;
  margin:0 0 0 -182px;
  padding:16px;
  border:4px solid #ff8866;
  border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px;
  font:normal normal 13px Cambria,Georgia,Serif;
  background-image: -ms-linear-gradient(bottom, #ffeecc 0%, #ffcc77 100%);
  background-image: -moz-linear-gradient(bottom, #ffeecc 0%, #ffcc77 100%);
  background-image: -o-linear-gradient(bottom, #ffeecc 0%, #ffcc77 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffeecc), color-stop(1, #ffcc77));
  background-image: -webkit-linear-gradient(bottom, #ffeecc 0%, #ffcc77 100%);
  background-image: linear-gradient(to top, #ffeecc 0%, #ffcc77 100%);
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
  #fblikebox::after, #fblikebox::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}
  #fblikebox::before {
    border-top-color: #ff8866;
    border-width: 15px;
    left: 10%;
    margin-left: -5px
}
  #fblikebox::after {
    border-top-color: #FFF; /* Samakan dengan warna background */
    border-width: 9px;
    left: 10%;
    margin-left: 1px
}
  #fblikebox a.close {
    position:absolute;
    top:-10px;
    right:-10px;
    background-color:#333;
    font:normal bold 16px Arial,Sans-Serif;
    text-decoration:none;
    line-height:22px;
    width:25px;
    text-align:center;
    color:white;
    border:2px solid #ff8866;
    border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;
    cursor:pointer;
}
</style>
<script type='text/javascript'>
//<![CDATA[
     $(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
     $('#fblikebox').animate({bottom:"100px"}, 1000);
// hilangkan kotak pesan saat tombol (x) diklik
     $('a.close').click(function() {
     $(this).parent().fadeOut();
     return false;
});
});
//]]>
</script>
<div id='fblikebox'>
<!-- likebox start --!>
<div class="fb-like-box" data-href="http://www.facebook.com/harapansebuahcintaabadi" data-width="290" data-height="182" data-show-faces="true" data-stream="false" data-header="false"></div>
<!-- likebox end --!>
<a class='close' href='#'>&times;</a><a style=" font-size:10px; color:#ff8866;float:right; margin-right:35px; font-size:10px;" href="http://harapansebuahcintaabadi.blogspot.com/">::Go To This Web::</a>
</div>

4.  Setelah ini simpan dan kemudian kembali kemenu Dasbor.

5.  Pilih menu >>Template<< dan >>Edit HTML<<

Ket. Untuk Edit HTML ini di usahakan mengunduh dulu template lengkapnya agar tidak terjadi hal-hal yang di inginkan

6.  Setelah itu cari kode script </body> kemudian copykan kode script di bawah ini persis di bawah kode </body>

<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/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

7.  Simpan dan Lihat hasilnya.

Keterangan lainnya: Rubah warna biru dan warna merah pada no 3 di sesuaikan dengan anda. Untuk warna biru adalah URL atau alamat facebook anda, dan untuk warna merah adalah URL blog home anda.

Setelah semuanya selesai anda lihat hasilnya setelah loading blog selesai. Sekian dari saya. Semoga bermanfaat. dan semoga berhasil.