Cara Membuat Facebook Like Auto Hide Di Blog - V2

Hari ini saya akan mecoba share atau update postingan kembali di blog tercinta ini yaitu blog O.W alias Oto Website, hehehe . . .
Dan kali ini saya akan mencoba share tentang widget Facebook yang saya beri judul Cara Membuat Facebook Like Auto Hide Di Blog - V2. Sebelumya blog ini pernah membahas Cara Membuat Facebook Like Auto Hide Di Blog yang memanfaatkan bantuan dari jQuery, kali ini juga sama kita juga menggunakan bantuan jQueri tapi widget kali ini lebih simple dan lebih mudah sedikit memasangnya.

Widget ini sebenarnya adalah gabungan dari empat wigets yang saya pisahkan menjadi satu widget yang khusus untuk facebook saja, untuk postingan articles mendatang saya pasti akan share empat widget gabungan dari wiget ini.
Untuk lebih jelasnya tentang widget ini sobat bisa lihat dulu demonya dulu dengan menekan tombol berikut ini:

Lihat Demo

Nah sudah jelaskan? kalo begitu sekarang mari kita bahas Cara Membuat Facebook Like Auto Hide Di Blog - V2 ini :

1. Login ke akun blogger sobat.

2. Pada Dasbor klick Rancangan ➨ Tambah Gadget (saya sarankan di bagian paling bawah dan jangan di beri judul)

3. Lalu sobat pilih HTML/Java Scrip ➨ Setelah itu copy kode berikut dan paste atau letakkan di dalamnya!

<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); });    });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhetB7sC2Qxt1bbb35W2UgVowOtusCPETXL-A3193iqgh0eTPLfSIzAMz1mvoabvPKBoEv5WfaySI8ba90uqUmLF-EwEPA8A-OJOilfkmmFFKMUYWGKhkItS1YlLZuD6q7LoU7sw5lH3ac/s1600/otowebsite.blogspot.com-facebook.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fdekrif&&width=200&height=348&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:348px;" allowtransparency="true"></iframe></div></div></div>

Ganti dekrif dengan url facebook fans page sobat.
Contoh url facebook fans page Oto Website adalah "http://www.facebook.com/dekrif" maka cukup ambil url belakangnya saja ya itu "dekrif"

4. Lalu simpan.

Selesai !

Sekarang sobat bisa lihat sendiri hasilnya pada blog sobat!

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan komentar/tanggapan sobat tentang postingan/articles di atas!