Cara Membuat Floating Facebook Like Box di Blog

Jumat, 24 Februari 2012

Cara Membuat Floating Facebook Like Box di Blog

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("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&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://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/123456
menjadi
http%3A%2F%2Fwww.facebook.com%2Fpages%2Ffbanda%2F123456


Rating: 4.5

18 Komentar untuk "Cara Membuat Floating Facebook Like Box di Blog"

  1. Ini kayak yang di Wordpress ya gan :) Lanjutkan Gan! Good Luck

    Kunjung balik ya gan :D Kompetisi Web Kompas MuDA & Pertamina

    BalasHapus
    Balasan
    1. sudah saya kunjungi gan. terima kasih :)

      Hapus
  2. wah ane jg dah pasang tp hasil ngoprek script, biar beda plus unik aja :D

    BalasHapus
    Balasan
    1. saya kurang ngerti kalo ngoprek kang hehe

      Hapus
  3. koq gg bisa yaahc... mohon bantuannya..
    www.timurmendunia.blogspot.com

    BalasHapus
    Balasan
    1. perhatikan saat mengganti urlnya dengan url fb anda :)

      Hapus
  4. Sip mas, contohnya sudah ada di blog ini juga. Makin jelas deh.

    BalasHapus
  5. Terimakasih gan.. bisa ane pakai di blog ane nih..

    BalasHapus
  6. keren ini sob,,,coba dulu ah,,semoga berhasil n cocok

    BalasHapus
  7. Jadwal Sepak Bola Siaran Langsung Liga Inggris 29 September 2012 – Jadwal Sepak Bola Liga Inggris 29 September 2012. Pertandingan sepak bola Liga Inggris tanggal 29 September ini mempertemukan pertandingan yang cukup seru antara Arsenal VS Chelsea dan Manchester United VS Tottenham Hotspur dan berikut ini Jadwal Liga Inggris Tanggal 29 September 2012 yang akan di siarkan secara langsung oleh Globat TV dan MNC TV.

    BalasHapus
  8. wah hebat bener mas, langsung jalan.
    thank you bro
    http://www.oqzigen.blogspot.com/

    BalasHapus
  9. Tutorial untuk Wordpressnya ada ga mastah? ane lagi cari-cari nih.. Thx

    BalasHapus
  10. boleh juga dicoba nih gan tutornya

    BalasHapus
  11. saran yang bermanfaat sob http://www.kisikisibola.com

    BalasHapus
  12. nice info sob,blog ku jadi makin cantik nih,tolong dikunjungi ya
    www.ao-tool.tk

    BalasHapus
  13. makasih banyak buat artikel nya,, nice post...

    http://goo.gl/7DUIes

    BalasHapus

Terima Kasih Udah Baca Artikel Blog Tyo. Silahkan berkomentar, bebas dan bertanggung jawab. Oh ya, masih banyak artikel bagus lho di blog ini, ditunggu komentar dan kunjungannya kembali