Cara Membuat Widget Facebook Like Box Autohide

Cara Membuat Widget Facebook Like Box - Hai sobat blogger hari ini Fahri's Blog ingin berbagi info menarik ini tentang cara membuat widget facebook like box di blog. Caranya gampang kok, Penasaran?? Yuk ikuti langkah di bawah ini.

1.Pertama- tama pastikan kalau kalian sudah membuat fanspage terlebih dahulu, belum mempunyai fanspage?? Yuk baca artikel saya yang ini terlebih dahulu >>Cara Membuat Like Box di blog

2.Pastikan kalian mengikuti langkah 1 dan 2 saja . Jangan ikuti langkah berikutnya, karena kita ingin membuat facebook like box dengan tersembunyi.

3.Sekarang perhatikan kode Fanspage facebook kalian, tepatnya berada di atas. Untuk lebih jelas lihat gambar di bawah ini. 

4.Setelah kalian melihatnya, copy dan paste kode di bawah ini ke blog kalian. Caranya seperti biasa, Pilih Tata Letak - Html/JavaScript - Copy kodenya - Save

<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/AVvXsEg_olAE3wtyfLOmDrWTwVliR1lNWYKGDnmq-YdEHhxA5W1F0u1fQZG8YaUbyJlBjPXVtTc9tbpECEKLNxtHsWUDGi3qUHQ_NFJgPMtd0bLVpOO6hXYJ8kEXUvAMhIhk94iaJcHZkDUMew/s1600/otowebsite.blogspot.com-facebook.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/How-Yourblogblogspotcom/568177929908236?ref=hl&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>

5.Perhatikan kode yang MERAH, ganti dengan kode Fanspage facebook kalian

6.Jika kalian melakukannya dengan benar, maka hasilnya akan seperti gambar di bawah ini

7.Selamat sekarang kalian sudah berhasil memasang facebook like box autohide pada blog. 

Tweet

Subscribe to receive free email updates: