Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Floating Facebook Like Box di Blog

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.

Menambahkan Jquery Plugin
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.

Menambahkan Kode HTML pada Widget
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/AVvXsEiO84UgBhil41mlxHlq9iw56DsZkEMKv0NA7UIyjxlHXAZJEhHU2LSAuEH_XEYo68z3lxSDLyeGimt3vw9BmJ825wnAARbKsZemsrzcGXimlnhyphenhyphen16i894jdmILhta5AyySUweZQzCN-Gy8/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

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

39 komentar

1. Komentar ini, diurutkan dari yang terbaru
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
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. mantab nih... ijin nyoba ya om.... :)
    1. :-bd
  2. sip coy
  3. thx kang ismet, ane coba ah :-* :D
  4. maaf gan kok saya gabisa yah... klo d klik floating like'y malah ada tulisan Could not retrieve id for the specified page. Please verify correct href was passed in.
    gmna solusinya gan
  5. sama saya seperti cepp rizal..buntu ni
  6. sama saya seperti cepp rizal & Hendru ..buntu ni
  7. bang, mau tnya nih ! gimana caranya supaya letaknya dikiri ? soalnya sdah saya coba-coba tp nda berhasil bang ! mohoh dibantu ya bang,
    1. coba ganti dengan float:left
  8. ga bisa float leaf jg ga bisa
    boss
  9. gimana donk apa bisa di bantu
  10. "Could not retrieve id for the specified page. Please verify correct href was passed in"
    . cuma ada ini
  11. gan dah bisa makasih banyak ya nanti saya mampirlagi dan tolong bantu ya om juragan
    1. Syukur deh kalau udah g ada masalah...
  12. thank's gan
  13. terimakasih bang boleh dicoba juga ilmunya...
    1. Sip sob... jangan lupa balik lagi kemari :)
  14. mantap kang, ntah ane coba deh ni triknya
  15. wahh berat ga om kalo blog dipasaingin trik ini?
    1. Ngga kok... coba aja
  16. waw icon-nya bagus nihh
  17. wah..keren gan..
  18. makasih mas sharingnya, akan saya coba...
  19. maksaih om,,cocok untuk blog yg templatenya kecil seperti punya ane,,jd gak menuhin tempat
  20. Terimakasih atas tips-nya
    salam knal aja buat semuanya
    www.anfilem.blogspot.com
  21. sudah kupasang bang,,, ditunggu kunjunganya
  22. yang lengkap dengan tombol twitter dan bloggernya gmn mas
    1. kayaknya tinggal nambah kode sob :)
  23. dicoba dulu gan :)
  24. Tq...sdg coba...visit http://vitaminvortexshaklee.blogspot.com/p/anyaman-buluh.html?m=0
    1. Sugah berhasil ya? templatenya pake mobile ya bu.. kereeen :)
  25. pengen nyoba tapi lihat-lihat dulu.. :)
    terima kasih pak sharingnya
  26. Kang ismet blogmu membantu banget.. :D hahaha
  27. kang kaloq buat like box sama followers valid html5 gimana..??
  28. kang mau tanya nih,gimana caranya agar like box diam mengikuti scroll seperti punya mas ismet?
    1. pake cara ini http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html
  29. thanks buat tutorialnya
    juntak01.blogspot.com
  30. -_- saya juga udah buat posting ginian, tapi gak ada yang datang ngunjungin.. sedih rasanya T_T
    aboutdoublr.blogspot.com
  31. Unknown
    Komentar ini telah dihapus oleh pengarang.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.