Membuat Floating Facebook Like Box di Blog
0 views
Floating Facebook Like Box atau kalau diartikan Kotak Suka Facebook yang Melayang (rancu ya?). Ya.. saat saya mencoba memberikan tutorial tentang Cara Membuat Floating Facebook Like Box di Blog, seperti yang terlihat di sebelah kanan blog ini.

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.
Yup, ini dia cara pembuatan Floating Facebook Like Box di Blog.
2. Klik Dasbor>Rancangan>Edit HTML
3. Cari kode
2. Copy kode dibawah ini
4. Save
Mohon Dibaca!!!
Sebelum menyimpan URL Facebook anda, ganti kode-kode pada URL.
: dengan %3A
/ dengan %2F
Misalkan URL Facebook anda :

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.
Yup, ini dia cara pembuatan Floating Facebook Like Box di Blog.
Menambahkan Jquery Plugin
1. Login ke Blogger2. 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.
Menambahkan Kode HTML pada Widget
1. Klik Dasbor>Rancangan>Tambah Gadget>HTML/JavaScript2. 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("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/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 http%3A%2F%2Fwww.facebook.com%2Fkangismet.net dengan Facebook Fan Page Anda.4. Save
Mohon Dibaca!!!
Sebelum menyimpan URL Facebook anda, ganti kode-kode pada URL.
: dengan %3A
/ dengan %2F
Misalkan URL Facebook anda :
http://www.facebook.com/pages/fbanda/123456menjadi
http%3A%2F%2Fwww.facebook.com%2Fpages%2Ffbanda%2F123456
39 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
aboutdoublr.blogspot.com
juntak01.blogspot.com
terima kasih pak sharingnya
salam knal aja buat semuanya
www.anfilem.blogspot.com
. cuma ada ini
boss
gmna solusinya gan