Cara Membuat Facebook (FB) Like Widget Tersembunyi

Facebook Like (Fb Like) widget bisa juga kita sembunyikan seperti buku tamu, saya yakin teman-teman sudah sering melihat facebook like widget tersembunyi ini di blog lain.

Nah pada tutorial kali ini saya akan menuliskan cara membuat fb like widget tersembunyi, dengan menyembunykan widget facebook like ini maka kita bisa menghemat tempat di sidebar dan bisa memasang widget lain.

Ok saya rasa tidak perlu panjang labar, mari kita langsung katopik utama kali ini.

Cara Pasang Fb Like Tersembunyi (Facebook Widget)

Untuk memasang widget yang satu ini di blog kamu silakan ikuti langkah-langkah berikut:

1. Login ke blogger
2. Klik menu Tata Letak

3. Klik Tambah Gadget, pilih gadget Html/JavaScript


4. Masukkan kode yang sudah saya sertakan di bawah di dalam nya
5. Simpan & Selesai

Berikut kode yang harus dipasang :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".fblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.fblikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhebGjvSR_PQRlm1ilcAee1NkA9JyKDVkh1Lvs1uUj_MI7XIRdltIODTUZsUsHySmQbVgv3MNToJlCc9eUb-tJtUFnkJIpY0X-C22UlxOsLwCX8JLgjbAtKLEl0dGL8CNfHfucbeaOK08w/s1600/fblikewidget.png") 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%;}
.fblikebox div{background:#ffffff;border:none;position:relative;display:block;}
</style>
<div class="fblikebox">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FAhmad-Rifai%2F342112850625&amp;width=245&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:245px; height:270px;" allowtransparency="true"></iframe>
</div>
</div>

Silakan ganti kode yang saya beri warna merah (Ahmad-Rifai & 342112850625) dengan alamat facebook fans page milik kamu, berikut contoh link lengkap halaman facebook milik saya.

http://www.facebook.com/pages/Ahmad-Rifai/342112850625

Nah 2 kode yang saya beri warna BIRU itulah yang harus dipasang pada script fb tersembunyi di atas, dua kode tersebut dipisahkan oleh garis miring (/).

Oh ia, pada script widget di atas ada kode

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Saya letakkan paling atas. Nah ... Jika pada template kamu sudah ada kode jQuery 1.6.1 tersebut maka kamu tidak perlu lagi menyertakan nya pada facebook like tersembunyi ini, silakan hapus kode jQuery 1.6.1 nya, karena 1 saja sudah cukup.

Bagaimana cara mengetahui kode jQuery 1.6.1 tersebut ada atau tidak?

Caranya mudah kode, silakan lihat sumber halaman atau source code blog kamu (baca : 2 Langkah Mudah Melihat Source Code WebBlog), kemudian cari kode tersebut (>baca : Cara Mudah + Cepat Mencari Kode Html di Blogger).

Nah itulah cara membuat facebook like (fb like) widget tersembunyi di blogger, selamat mencoba dan semoga bermanfaat.