Tuesday, June 4, 2013

Home » » Membuat Widget Like Box Facebook Nempel Disisi Blog

Membuat Widget Like Box Facebook Nempel Disisi Blog

Sebelumnya baca artikel Cara Buat FansPage Facebook sama artikel Pasang FansPage Facebook Di Blog dulu yah, biar sukses.

Kalau dua artikel di atas sudah dibaca, langsung saja kita terapin bagaimana cara agar widget nempel di sisi Blog. Kali ini menggunakan plugin Like Box opsi IFRAME yang kebetulan keterangannya ada di artikel Pasang FansPage Facebook Di Blog.

Langkah-langkahnya:

  1. Login ke Blogger.
  2. Meluncur ke Tata Letak, di Tata Letak pilih Tambahkan Gadget, terus pilih widget HTML/JavaScript.
  3. Jika sudah paste kode di bawah ini ke dalam widget HTML/JavaScript.
<script type="text/javascript">
//<!--
 $(document).ready(function() {
 $(".myLikeBoxFB").hover(function() {
 $(this).stop().animate({right: "0"}, "medium");}, function() {
 $(this).stop().animate({right: "-250"}, "medium");}, 500);
 });
//-->
</script>

<style type="text/css">
.myLikeBoxFB {
 background: url("http://3.bp.blogspot.com/--wcmsdpJBok/Ua1NRyygqPI/AAAAAAAAAbM/yS9FeDlJVAg/s1600/lkfacebook.JPG") no-repeat scroll left center transparent !important;
 display: block;
 float: right;
 height: 270px;
 padding: 0 5px 0 46px;
 width: 245px;
 z-index: 99999;
 position: fixed;
 right: -250px;
 top: 20;
}
.myLikeBoxFB div {
 border: none;
 position: relative;
 display: block;
}
</style>

<div class="myLikeBoxFB">
 <iframe src="#"></iframe>
</div>

Alamat SRC dari IFRAME ganti dengan kode plugin Like Box sendiri yah dan pastikan juga jQuery sudah terinstall di template yang digunakan.

Kalau jQuery belum terinstal, paste kode berikut di bawah tag <head> di dalam template.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>

Atau yang ini juga boleh

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
Labels: