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 facebook
plugin yang disediakan 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.
Rancangan |
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
facebook, maka otomatis terbuka facebook like nya atau jika masing
gak 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.
Contoh |
Langkahnya :
- Pertama Login ke akun blogger anda.
- Pada Dasbor klik Rancangan ➨ Tambah Gadget (saya sarankan di bagian paling bawah dan jangan di beri judul)
- Lalu sobat pilih HTML/Java Scrip ➨ Setelah itu copy kode diatas dan paste pada gadget html tersebut
<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/AVvXsEhjfO_yOGi7C_erTbulIuWbtEndWohK-4oo5vUKzaGP1RmfMFb1pdVdJTwrqEkG-TFJDSeh_84LyyabyBvtraWvTd3QeZZj0sTd7znp0mUlwvp88NHuyNgp_S7WbcrSpBJ140__I_LpyVY/s1600/otowebsite.blogspot.com-facebook.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FUkurKomunitasRiauDanSekitarnya&&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 kuning ( UkurKomunitasRiauDanSekitarnya )dengan dengan url facebook fans page anda (yang telah kita buat diatas). Contoh url facebook fans page blog ukurbumi adalah "http://www.facebook.com/UkurKomunitasRiauDanSekitarnya" maka cukup ambil url belakangnya saja.
- Ok 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.
info mantab gan. thanks
ReplyDeletethanks infonya
ReplyDeleteberguna banget nih
thanks :)
ReplyDeleteMakasih bang...mambantu sangat ...
ReplyDelete