Cara membuat Facebook fan page buka tutup (auto-hide)

Facebook Like Auto Hide Di Blog 

Mungkin ini cara yang sangat gampang menurut saya, ketika membuat Facebook Like Auto Hide di Blog (buka tutup), saya sebut gampang, karena kita hanya memasukan kata terakhir dalam alamat url facebook page kita, jadi kita tidak perlu membuat membuat lagi lewat alamat facebooke plugin yang di sediakan oleh facebook. Cara ini saya dapatkan dari tutorial seorang bloger juga... mulanya saya ragu, sebab selama ini selalu saya coba dari berbagai tutorial tapi tetap gagal, kalaupun bisa, masalahnya adalah loading blog sangat lelet alias lama... makanya saya jadi malas memasangnya di blog saya... Tapi setelah saya coba, ternyata bekerja dengan baik, dan tidak mempengaruhi loading blog kita..
  • Untuk lebih jelasnya anda dapat di lihat pada contoh gambar di bawah ini, perhatikan lingkaran facebook yang saya lingkarkan dengan lingkaran berwarna pink, itu efek yang terjadi, dimana saat mouse menyentuh logo facebokee, maka otomatis terbuka facebook like nya....  atau jika masing ga mengerti cara kerjanya dapat perhatikan pada bagian kanan blog saya, karena saya juga memakai  facebook like yang sama dengan yang akan saya berikan petunjuk di bawah ini.
    • How to make a gif
    gambar widget facebook autohide di blog
  • Syarat utama untuk membuat Facebook Like Auto Hide atau buka tutup adalah anda harus mempunyai facebook, setelah itu anda harus membuat fan page dari facebook anda.., dan jangan lupa ingat alamat url facebook page anda...... ini merupakan syarat utama..
    • Untuk membuat Cara Membuat Facebook Page dapat anda cari infonya di gogle atau buka create Facebook page.
    • Kemudian Pilih jenis fans page Anda ( saya sarankan pilih/klik opsi Brand or Product), 
    • Kemudian Pilih opsi "website" dan isikan nama Page sesuai dengan yang diinginkan. centang "agreement (setuju)" dan klik "Get Started (mulai)"
    • Selanjutnya anda akan masuk ke halaman Facebook Page yang telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalnya mengupload foto/gambar untuk Facebook Page, mengedit informasi, dan lain sebagainya
    • Akhirnya sudah jadi deh  Facebook Page anda... Ingat alamat urlnya....karena ini yang di butuhkan dalam pembuatan facebook like fans.
Oke, dari pada berpanjang kata, dan terlalu lama, kita langsung aja pada petunjuk tutorial membuat facebook like buka tutup dibawah ini.....
  • Pertama Login ke akun blogger anda.
  • Pada Dasbor klick Rancangan ➨ Tambah Gadget (saya sarankan di bagian paling bawah dan jangan di beri judul)
  • Lalu sobat pilih HTML/Java Scrip ➨ Setelah itu copy kode dibawah ini dan paste atau letakkan di dalamnya!
KODENYA :




<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="http://1.bp.blogspot.com/-W4a-0iDAPGM/T-2OV_KztsI/AAAAAAAADos/Tg1gppQWsTo/s1600/otowebsite.blogspot.com-facebook.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsikkahoder&&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>
KETERANGAN :
  • Ganti huruf atau kata yang berwarna biru ( sikkahoder )dengan dengan url facebook fans page anda (yang telah kita buat diatas). 
    • Contoh url facebook fans page blog sikkahoder  adalah "http://www.facebook.com/sikkahoder" maka cukup ambil url belakangnya saja yaitu "sikkahoder"
  • Oke.. sekarang tinggal save dan lihat hasilnya...
Tutorial membuat widget like facebook ini telah berhasil saya terapkan di blog saya, jadi saya rasa tidak ada keraguan buat saudara untuk menempatkan pada blog saudara... Jangan lupa komentarnya...
di