cara membuat like facebook mengambang pada blog

Banyak sekali cara/trik yang dapat kita gunakan untuk memasang like facebook pada blog kita. Bisa hanya dengan meletakkannya pada Gadget HTML/Java langsung tanpa animasi apapun atau bisa juga dengan meletakkannya mengambang pada tengah-tengah blog kita. Tapi yang satu ini tentu sangat mengganggu bagi para pengunjung blog kita. Salah satu cara yang lebih baik adalah dengan meletakkannya menempel pada sebelah kanan atau sebelah kiri sehingga tidak begitu mengganggu.

Berikut ini caranya:

• Login ke Blogger.com.
• Pada bagian template pilih Edit HTML.
• Centang pada bagian Expant.
• Carilah kode  </head>. Biasanya terletak pada bagian atas atau bisa juga dicari dengan Ctrl + F.
• Letakkan kode berikut tepat pada bagian atas </head>.
  
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">

  </script>
  
  
• Simpan template Anda.
• Masuk ke bagian tata letak --> Ad a Gadget --> HTML/Javascript.
• Letakkan kode berikut:

<script type="text/javascript">

//<!--

$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIRC4NeI5h_N2C-IifzjaV0n6ZhzKVhu_YygqhmpTjz7qrQh164rQK1UmwnWnHjpaZ-i0DpDZzcpf1R1yAZChkQjH9InTnHbUazWc67UJVfm8NVFkjcJyYh8Qx9h1_ncLBxU4kh_ObdrM/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.floatinglikebox div{border:none;position:relative;display:block;}

.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.floatinglikebox span a{color: #808080;text-decoration:none;}

.floatinglikebox span a:hover{text-decoration:underline;}

</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FCATATAN-HARIANKU%2F202832269775676&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://nurhamim86.blogspot.com" target="_blank">+Get This!</a></span></div></div>

• Kode yang berwarna biru bisa diganti untuk mengubah letak gadget ini nantinya. Letak kiri = left, kanan = right. 20% menunjukkan letak gadget dari bagian atas, silahkan ganti sesuai kebutuhan.
• Kode yang berwarna merah adalah alamat page facebook Anda dengan cara diubah sbb:

Contoh:
http://www.facebook.com/pages/Nurhamims-Blog/257171221001847

diubah menjadi:

http%3A%2F%2Fwww.facebook.com%2Fpages%2F Nurhamims-Blog %2F 257171221001847  

• Setelah selesai simpan gadget tersebut.
• Silahkan lihat hasilnya

Semoga bermanfaat....