Lompat ke konten Lompat ke sidebar Lompat ke footer

Tips Membuat Floating Facebook Like Box Di Blogspot


Tips Membuat Floating Facebook Like Box  - Widget melayang Facebook Like Box kali ini lebih simple dan ringan daripada widget-widget melayang lain yang pernah saya coba. Menempatkan widget dengan cara disembunyikan atau widget floating/melayang selain menghemat tempat pada sidebar juga dimaksudkan supaya tidak menghambat kecepatan loading awal blog pada saat dibuka. Floating Facebook Like Box ini saya dapatkan saat melancong ke blog tetangga dari Uruguay (jauh sekalee..!) yang full stylish banget. So mumpung masih fresh mendingan langsung bagi-bagi aja buat sobat blogger yang mungkin kepingin memasang widget melayang Facebook Like Box di blognya.



Cara Membuat Widget Melayang Facebook Like Box

1.     Sebelumnya anda harus sudah mendaftar dan mendapatkan kode Facebook Like Box untuk nanti dipasang pada widget.
2.       Login ke dashboard blogger anda.
3.       Pilih Rancangan > Elemen Laman > Add Gadget (HTML/Javascript).
4.       Copy script widget dibawah ini dan paste pada gadget.

<style type="text/css">
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7he-h7EU1LBG9j-Y7Ew3lH4swE_cwtzemu16KCzSMN5-H1z_x5kP3pNBEBJrRapjq2XcdeIdFKEqQq7t6Sa6tgBgisNyE_w8n3XlJPXrhTKbB_MEw8T6p_kp3MFj63xIC3VsGc6vP942/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_g5rz5xcrTGSvBQG2nRPp9xNoGuEJ9SOY4drdEthjwIeLNyHbBo7-lCdP-OPoG7HL6bhe8N2dfzev4cEWsDEQ9QdWz8dVm57yuCixlIFpABEP0i0Pl3usxqujenWcw0FRS2oqb2cE6liw/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
<!-- Begin Facebook -->
CONTENT FACEBOOK HERE
<!-- End Facebook -->
</div>
</div>

5.      Ganti tulisan CONTENT FACEBOOK HERE dengan kode Facebook Like Box anda.
6.      Jika pada template anda belum terdapat javascript dari Facebook, maka copy saja javascript dibawah ini dan letakkan tepat diatas kode </head>  pada template supaya widget Facebook Like Box ini bisa berfungsi.

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

7.     Sesuaikan tinggi dan lebar widget supaya sama dengan ukuran Facebook Like Box yang anda buat sebelumnya melalui Facebook.
8.      Save / Simpan.

Well, cukup gampang bukan membuat widget melayang Facebook Like Box  ini ? Sekian dulu tips blogging kali ini, happy nice blogging on Saturday Night !!

58 komentar untuk "Tips Membuat Floating Facebook Like Box Di Blogspot"

  1. bagus banget info nya bro dan akan kucoba di web ku nanti dan salam kenal

    BalasHapus
  2. sidebar aku masih luas om, jadi widgetnya ga perlu di layang2in heuheu :3

    BalasHapus
  3. @MICO
    Salam kenal juga yaah..;)

    @bebybugg
    Iye tau sidebarmu masih luas beb, mau dipasangin poster film juga masih cukup koq.. :)) =))

    BalasHapus
  4. keren fan,
    aku mau nanya fan, cara nambah gadget pada blog dengan tempalate tampilan persis seperti blog kamu yang ini gimana caranya? soalnya aku baru pertama kali bikin blog..makasih

    BalasHapus
  5. maksud aku tampilan dinamis seperti ini :)

    BalasHapus
  6. kren nih jadi kya buku tamu ya sob pake efek show/hide kan,..?

    thank sob untuk tutornya tar ane pake ah d blog baru ane

    BalasHapus
  7. @BLOGCUNAYZ
    Iya mmg mirip buku tamu pake show/hide, tapi kodenya lebih simple ya..;;) Trims kunjungannya sobat ;)

    BalasHapus
  8. Cara mendapatkan kode like facebook nya gmn mas? mohon info nya...

    BalasHapus
  9. Trims infonya gan....
    sangat bermanfaat.....

    BalasHapus
  10. @sukague.com
    Menurut saya widget facebook like ini ringan saja, boleh jadi beratnya karena hosting domain yang anda pakai yang lelet ;))

    BalasHapus
  11. ini nie yang saya cari cari baru ketemu nie,kanlangsung ku coba nie gan ,,,,,,,,

    BalasHapus
  12. terimakasih infonya semoga saja sangat bermanfaat agar tampilan nya lebih bagus dan meyakinkan.

    BalasHapus
  13. kecepatan blog meneurun sedikit. tapi pengunjung pasti akan tertarik untuk melihat-lihat yg melayang :D

    BalasHapus
  14. wah keren nih tutorialnya sobat..
    kalo ada waktu mampir balik sob

    BalasHapus
  15. Gan lo boleh tau gmn gan cari code facebook'a new bie gan x(

    BalasHapus
  16. Hy sob,.....
    makasih ya info2nya....
    ijin folow blog juga.....
    kalau berkenan folback ya...
    trims....

    BalasHapus
  17. Sipp, berhasil dipasang di blog saya, makasih infonya :)

    BalasHapus
  18. sip bro.....!!!!!!!! ane coba dulu bro

    BalasHapus
  19. minta izin mas ya mas , ilmu mas di pasang di blog saya mas ,sekalian mas nanya mas , gmna cara pasang nya yang melayang tu mas mohon petujuk nya mas ??????

    BalasHapus
  20. mksd kode facebook tu, id facebooknya ya..??

    BalasHapus
  21. Facebook like box itu apa ya ?
    Di tunggu gan jawabannya. . .

    BalasHapus
  22. thanks gan untuk tutorialnya, cara daftar untuk mendapatkan kode like Facebooknya bagaimana ?

    BalasHapus
  23. cara dapetin kode FB nya gamna tuh ??
    masih bingung ???

    BalasHapus
  24. Bos..ini blog terlalu cantik, over efek akhir nya kurang nyaman. Banyak tulisan yg tertutup...Mohon di koreksi lagi blog nya. Mampir juga ke blog saya bos. http://ronniobanderas.blogspot.com

    Untuk publikasi comment aja butuh perjuangan ni bos tertutup burung sialan.

    BalasHapus
  25. KO G BISA CI GIMANA YAH CARA'NYA

    BalasHapus
  26. keren gan..

    follback ya..

    http://rexcarnation.blogspot.com

    BalasHapus
  27. dapetin code like box nya gimana yah,, :D

    BalasHapus
  28. makasih infonya gan. berguna sekali.

    BalasHapus
  29. hmmm,,oke juga,,hehe
    sipp sipp,,
    :D

    BalasHapus
  30. terimakasih infonya nice post blog

    BalasHapus
  31. bagaimana cara mendaftar like box/hingga sya bisa dapat kode yg dimaksud
    saya sudah aplikasikan di blok saya bisa cuma tidak ada foto temen2 yg like halaman saya..trim tolong di bantu gan...

    BalasHapus
  32. Terima kasih sarannya gan...tolong dong posting juga floating melayang tanpa hidden gan followernya. Thanks, mudah2an cepat diproses.

    BalasHapus
  33. gan...saya sudah dapt id like box,udah saya terapin tapi kosong g ada gambar foto temen 2 yg like di bantu gan...

    BalasHapus
  34. om, jadinya kok biru...?,
    coba tengok di o-herba.blogspot.com,

    BalasHapus
  35. Assalamualaikum ... itu kade Facebook Like Box maksudnya apa ya ? nyarinya dimana ? Thanks before

    BalasHapus
  36. Bro ..
    klo conten facebook here nya dpetnya dari mna ??
    kasih penjelasan donk

    BalasHapus
  37. thanks mas bro.....sangat bermanfaat

    BalasHapus
  38. thanks atas info.x gan

    BalasHapus
  39. blog saya sepi bro gak ad teman, add blog saya ya bro, baru belajar http://smpn3rambangdangku.blogspot.com/

    BalasHapus
  40. Itu cara daftar dan dapetin kode facebooknya gimana? nggak dijelasin

    BalasHapus
  41. cara mendftar facebook like box'a cmna tu gan??
    oia mmpir" di blog ane juga yaa hehe

    BalasHapus
  42. thank info nya gan., ane lagi cari2 ini

    BalasHapus
  43. maksudnya kode like box apaan?

    BalasHapus
  44. mantap bos.tapi syangnya ketika dipraktekan muncul tampiln facebooknya namun sayang g ada gambar likenya.warna biru semua..nih blog buatan saya bos bisa dikoreksi nntinya ya..
    mampir ya..baru 3 hari saya buat..hehe

    BalasHapus
  45. Uda aku coba semua broooww kreeeennn

    BalasHapus
  46. maaf mas mw nnya nih, dapatin kode like box nya yg dri facebook gmn ya?

    BalasHapus
  47. terima kasih atas tutorialnya gan..
    mampir balik ya ;)

    BalasHapus