membuat buka tutup pada facebook like `

bagaimanakah cara membuat buka tutup pada widget facebook like , ketika di kunjungi pointer mouse atau hover ,, ?

Baiklah tutorial kita kali ini yaitu membahas mengenai cara membuat buka tutup pada widget facebook like menggunakan css , lhoh ,, knapa ?, karena dengan css loading blog akan terasa ringan ketimbang pake script ( bukan milik sendiri ).
Trik ini cukup simple anda cukup membuat kode css tersendiri untuk widget tersebut . widget ini dapat menggeser dari pinggir ke tengah atau membuka ketika pointer mouse mengarah pada widget facebook like tersebut dan menggeser dari tengah ke pinggir / menutup ketika pointer mouse meninggalkan widget facebook like tersebut .
oya , karena pada tutorial sebelumnya di blognya mastony sudah posting artikel mengenai Cara membuat pop up window pada facebook like anda bisa menggantinya di sini atau jika masih pake widget yang lama yaaa .. terserah sampean .

Langkah - langkah Cara membuat buka tutup pada widget facebook like
1.buatlah aturan css baru untuk widget tersebut seperti berikut ini :

<style>
#widget_like{position:fixed;right:0px;top:40px;background:url(https://sites.google.com/site/blognyamastony/iconblog/rsz_1fb_mini%20%281%29new.jpg)no-repeat left top;width:332px;height:325px;margin-right:-332px;padding-left:32px;display:block;transition:all 0.4s;-moz-transition:all 0.4s;-webkit-transition:all 0.4s;-o-transition:all 0.4s;cursor:pointer;background-size:32px 150px;-webkit-background-size:32px 150px;-moz-background-size:32px 150px;-o-background-size:32px 150px;}
#widget_like:hover{margin-right:-40px;position:fixed;right:0;top:40px;display:block;transition:all 0.4s;-moz-transition:all 0.4s;-webkit-transition:all 0.4s;-o-transition:all 0.4s;z-index:1;}
#Fb_like{background:#fff;margin:0;padding:0;}
</style>

keterangan : right:0;posisi widget di sebelah kanan , top:40px; posisi widget kebawah 40px dari atas ,width:lebar widget silahkan sesuaikan menurut sobat dan atur juga pada css margin-right .
untuk background-size anda bisa simak selengkapnya disini . .Resize Background Image
2.selanjutnya tambahkan di bawahnya kode iframe dari facebook seperti ini :

<div id="widget_like">
<div id="Fb_like">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fblognyamastony&amp;width=300&amp;height=325&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23C7DCD8&amp;header=false&amp;appId=230158270412466" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:325px;" allowtransparency="true">
</iframe>
</div>
</div>

Note :  blognyamastony adalah url halaman facebook silahkan ganti dengan url halaman facebook anda masing masing .contoh :
www.facebook.com/blognyamastony"
dan untuk peletakan bisa di letakkan di sidebar blog , footer blog dengan metode HTML/Javascript seperti berikut ini :
buka dasbor bloger .
pilih tata letak -->> add gadget / tambah gadget -->> pilih HTML/javascript kemudian ketikkan / copy dan paste seperti dengan cara di atas .
GAMBAR 1

GAMBAR 2

GAMBAR 3

dan sebagai hasilnya anda bisa lihat dibilah kanan blognya mastony .
untuk efek transition anda bisa baca selengkapnya disini EFEK TRANSITION memperlambat pergerakan .
dan dari sini tutorial mengenai cara membuat buka tutup pada widget facebook like di blog ini selesai .
semoga artikelnya bermanfaat untuk anda .

Terima kasih Anda telah membaca Artikel mengenai membuat buka tutup pada facebook like dan Kata kunci untuk Artikel ini yaitu membuat buka tutup pada facebook like