Cara Membuat Fans Page Facebook Bergeser & Melayang di Blog

Blogger : Fans Page Melayang dan Bergeser Jika di Klik

Pada materi kali ini kita akan membahas tentang cara membuat Fans Page Facebook melayang dan bergeser ketika diklik, nyok langsung praktek..

Langkah 1 : buka akun Fans Page Facebook anda, lalu copy alamatnya

Langkah 2 : buka Like Box, untuk lebih jelasnya lihat gambar dibawah
- pada Facebook Page URL, masukkan alamat Fans Page anda, dan untuk width, height terserah mau diisi berapa saja, setelah semua selesai klik et Code

- setelah memilih Get Code pilih IFRAME lalu copykan syntax

Langkah 3 : setelah anda membuat Fans Page Url, kita kembali ke Blog,
pada blog pilih Layout - Add Gadget - HTML JavaScript Gadget lalu copy kan syntax dibawah
nah syntax yang berwarna coklat merupakan syntax Fans Page URL kita yang tadi di copy.

<script type="text/javascript"> //<!-- $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .w2bslikebox{background: url("http://i961.photobucket.com/albums/ae100/wiwaha26/facebook_zps57b7e9a3.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""><div> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmuhammad.anwari.blogspot.com&amp;width=300&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=246217608782932" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowTransparency="true"></iframe></div></div>

- setelah itu Save

Langkah 4 : setelah menambahkan gadget kita pergi ke Template lalu pilih Edit HTML

cari kode </head> dan copy kan syntax berikut tepat diatasnya

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

klik Save jika sudah!!

Dan lihat blog anda, apa yang terjadi???

Posted in: Blogger