Floating Facebook Like Box atau kalau diartikan Kotak Suka Facebook yang Melayang. Berikut Tutorial tentang Cara Membuat Floating Facebook Like Box di Blog,
Biasanya kita memasang FB Like Box 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,FB Like Box pastinya ini tidak terlihat.
Atau mungkin kita kebingungan untuk menempatkannya, karena kehabisan space. Floating Facebook ini mungkin hampir serupa dengan Menyembunyikan shoutmix atau Buku Tamu.
Yup, ini dia cara pembuatan Floating Facebook Like Box di Blog.
1. Login ke Blogger
2. Klik Dasbor>Rancangan>Edit HTML
3. Cari kode</head>
4. Tambahkan kode ini diatas </head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
Abaikan langkah ini apabila template anda sudah terinstall Jquery Plugin.
1. Klik Dasbor>Rancangan>Tambah Gadget>HTML/JavaScript
2. Copy kode dibawah ini<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYpHi1feLwxRfpS9vPjwDLvQ7ppJgUqjk0Bnv-TpN0QQaCxPeasUFCHZtZn3pesy8Hjg3iKy7euEvdHVMUb7zpztSVeOC9g9K0DgOFCNRd26vzVmpNivFw_lOcw_Zza3LBf0aMAGGXJhI/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%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fkangismet.net&width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://blog.kangismet.net/2011/11/membuat-floating-facebook-like-box-di.html" target="_blank">+Get This!</a></span></div></div>
3. Ganti Text Yang Berwarna Biru dengan Facebook Fan Page Anda.
4. Save
