Wednesday, 3 October 2012

Cara Memasukkan Facebook Like Auto Hide di Blogspot dengan Mudah

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
    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%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.

    4 comments: