Cara Membuat Floating Facebook

Ardi21_ansyah

Blogger, Widget

Minggu, 10 Agustus 2014

Belum ada komentar

Floating Facebook atau yang biasa disebut Like Facebook
yang muncul dari kana/kiri seperti gambar atau demo dibawah ini.

DEMO

Biasanya kita memasang Like Facebook ini di sidebar atau bottom bar. Tentunya hal ini bertujuan supaya blog atau web kita lebih dikenal, dan akhirnya traffic akan meningkat. Akan tetapi apabila kita scroll mouse ke atas atau bawah, Like Facebook ini pastinya ini tidak terlihat. Atau mungkin kita kebingungan untuk menempatkannya, karena kehabisan space. dan kali ini saya akan memberikan solusinya.

silahkan ikuti langkah berikut ini untuk memasang Floating Facebook:

>> Login ke Blogger <<

>>  Pilih Tata Letak <<

>>  Tambahkan Widget baru dengan mengklick "Add Gadget" <<

>> Setelah itu pilih HTML/Javascript <<

>> Copy kode script dibawah ini dan pastekan kedalam Widget <<

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6P0pIA6tJqEuhg4ssz-iHOL3NxUjwb5kQRUf4vV03KlNra4ShaR-3iUlbKnQcKN0be3M-Ih2LpmntH6qYGki444Im47BtdNxBXsZJSvmOJvKw4tux-6nk3GpUgqtgEV10T161VM1t7Y/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatlikebox div{border:none;position:relative;display:block;}
.floatlikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatlikebox span a{color: #808080;text-decoration:none;}
.floatlikebox span a:hover{text-decoration:underline;}
</style><div class="floatlikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/filannime&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://sahabatfilannime.blogspot.com/2014/08/cara-membuat-floating-facebook.html" target="_blank">+Get This!</a></span></div></div>

>> Simpan dan lihatlah hasilnya <<

QUOTES:

Kalian tinggal mengganti link ini https://www.facebook.com/Ffilannime
dengan link Fanspage Facebook kalian