Cara membuat kotak like facebook melayang di blog (floating facebook likebox) | Science dan blogging Cara membuat kotak like facebook melayang di blog (floating facebook likebox) | Science dan blogging Cara membuat kotak like facebook melayang di blog (floating facebook likebox) | Science dan blogging Cara membuat kotak like facebook melayang di blog (floating facebook likebox) ~ Science dan blogging

Cara membuat kotak like facebook melayang di blog (floating facebook likebox)


 Ini dia salah satu widget yang sangat menakjubkan.

Dimana orang-orang selama bertahun-tahun hanya menggunakan  tombol facebook like saja di blog, akan tetapi hari ini saya ingin memperkenalkan dan share ke Anda Cara membuat kotak like facebook melayang di blog (floating facebook likebox).

Floating facebook likebox adalah sebuah slider yang menyembunyikan Likebox di dalam wadah dan ketika visitor (pengunjung) mengarahkan crusor ke tombol  maka akan terbuka kotak Facebook likenya.

Langkah-langkahnya sebagai berikut:

LANGKAH 1. Menambahkan Plugin JQuery ke Blog Anda :
  1. Masuk ke Dashboard Anda> klik Design (rancangan)> Edit HTML.
  2. Cari kode </head> Gunakan Control + f untuk memudahkan pencarian, kemudian pastekan kode jquery  berikut sebelum kode </head>
  3. (Abaikan langkah ini jika Anda telah menambahkan Plugin JQuery ke blog)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
     4. Save (simpan) template.

LANGKAH 2. Tambahkan floating likebox ke blog Anda :
  1.  Buka halaman Tata Letak
  2. Klik tambah gadget > pilih tambah HTML/Javascript
  3. copy dan pastekan kode script dibawah ini : 
<script type="text/javascript"> //<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate ({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");},
500);}); //--> </script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http:///www.facebook.com/pages/Eyang-anom/427305383989192&amp;
width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=8&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http:/sijalupangna.blogspot.com">Tips dan trik, science dan bisnis</a></span></div></div>

Anda bisa mengganti "url fans page facebook Anda" dengan alamat url  fans page facebook Anda sendiri
contoh fans page facebook blog ini : http:///www.facebook.com/pages/Eyang-anom/427305383989192.
Sedangkan untuk gambar logo facebooknya seperti "http://1.bp.blogspot.com/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png", bisa  diganti dengan koleksi  gambar logo facebook Anda sendiri.
Save template, selesai sudah Cara membuat kotak like facebook melayang di blog (floating facebook likebox).
Semoga bermanfa'at. 

Sumber: http://problogiz.blogspot.com 
Pasang Widget Fans Page Facebook Melayang
Anda menyukai postingan diatas? Silahkan di share.
Science dan blogging Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

jalupangna Label: 02.13 31 komentar

31 komentar

  1. nice fb fans widget kang:)
    apa kabar? lama ga muncul kang jalupangna
    (notice code udah diupadte kang coba dicek di problogiz)

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh administrator blog.

      Hapus
    2. Nice....salam kenal pak, newbe.....punyaku tombol likenya kok ga muncul kenapa ya..mohon petunjuknya pak....maturnuwun....widafa.blogspot.com :-?

      Hapus
    3. untuk update csript kode kotak like fb fans page, silahkan mbak kunjungi blog saya yang satunya:
      http://jalu-pangna.blogspot.com/2013/04/cara-membuat-kotak-like-facebook.html
      Terima kasih atas kunjungannya dan salam kenal kembali..

      Hapus
  2. alhamdulillah, kabar baik. Udah saya cek kang hriza, terima kasih udah share. Nice info..

    BalasHapus
  3. thanks info sob :D
    boleh minta tolong sob , revew blog saya apakah sudah panyas ikut seo ?


    http://cacawidiyandika.blogspot.com/2013/01/mau-bikin-website-hosting-murah-abizz_16.html

    aku baru pemula ni sob, sangat perlu bantuan untuk revewnya :D
    makasi soobb

    BalasHapus
  4. kang saya ada masalah neh,,tombol like fesbuknya ga mau keluar di halaman blog saya,, jadi ketutup sama halaman blognya,, kira2 knapa ya kang?? hatur nuhun belumnya..

    http://sofyan-optik.blogspot.com/

    BalasHapus
    Balasan
    1. Mohon maaf baru saya balas skg, ada sedikit kesibukan. Kang sungkar blog anda ga bisa ditemukan. Sami-sami..:)

      Hapus
  5. oke sob,,thnks tutornya sob
    http://dangeltoblog.blogspot.com

    BalasHapus
  6. Mas..Kok tombol FB saya gak mau diklik, trus gimana cara mengopy kode link foto FB, makasih atas infonya semoga sukses

    BalasHapus
  7. Mohon maaf baru saya balas, coba anda kunjungi link posting terbaru saya ttg permasalahan yg anda tanyakan:

    http://jalu-pangna.blogspot.com/2013/04/cara-membuat-kotak-like-facebook.html

    -untuk mengkopi kode link image atau gambar anda mesti upload foto dulu di photobucket.com (silahkan googling di embah google cari dgn kata kunci photobucket.com)setelah upload gbr selesai klik view library nanti ada opsi "direct link" klik itu dgn otomatis sudah mengcopy kemudian pindahkan ke link yg di tuju.
    Salam...

    BalasHapus
    Balasan
    1. Keren Om' saya izin copas ilmunya...
      sekalian mampir om kapan- kapan
      arungjonga.blogspot.com

      Hapus
    2. Silahkan mas imron, ok...langsung menuju TKP. :)

      Hapus
    3. Om boleh minta script Recent comentnya ngak om,,,?

      Hapus
    4. Selamat siang mas imron, bisa ini script kodenya:
      <style type="text/css">
      #komentar {background: #fff; border:1px solid #8181F7;-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;margin:5px 0;padding:5px;}
      #komentar ul{margin:0;padding:0px;list-style: none;}
      #komentar ul li:first-child {border-top:none;}
      #komentar ul li {height:46px; background: #A9D0F5; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border:1px solid #8181F7;-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;margin:5px 0;padding:5px;}

      #komentar ul li:last-child {border-bottom: none;}
      #komentar ul li:hover {background: #CCFFFF;
      -moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;margin:5px 0;padding:5px;}
      #komentar a, #komentar a:link, #komentar a:visited {clear:both;color:#222;display:block;text-decoration:none;}
      #komentar .gamen {display: block;float: left;height: 42px;left: 4px;margin-right: 15px;position: relative;width: 42px;}
      #komentar .gamen>img { border: 2px solid #ffffff;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;box-shadow: 0 1px 2px #222222;background: url(http://tipstrikblogging.googlecode.com/files/Avatar%20Blogger%20Comments.jpg)repeat-x;}
      #komentar ul li div.ismen {color:#333;text-shadow:-1px -1px 1px #ccc;}
      #komentar .ismen {display: block;font-size: 1em;font-style: italic;line-height: 1.2;padding: 2px 4px 2px 0;}
      #komentar .gamen>span{width: 150px;height: auto;line-height: 20px;padding: 5px;left: 115px;margin-left: -64px;font-size: 1em;font-weight:bold;color: #212121;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: center;border: 4px solid #5858FA;background: rgba(255,255,255,0.7);text-indent: 0px;border-radius: 5px;position: absolute;pointer-events: none;bottom: 100px;opacity: 0;box-shadow: 1px 1px 2px rgba(0,0,0,0.2);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
      #komentar .gamen>span:before, #komentar .gamen>span:after{content: '';position: absolute;bottom: -15px;left: 50%;margin-left: -9px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid rgba(0,0,0,0.1);}
      #komentar .gamen>span:after{bottom: -14px;margin-left: -10px;border-top: 10px solid #5858FA;}
      #komentar .gamen:hover>span{opacity: 0.9;bottom: 55px;}
      </style>

      <div id="komentar">
      <ul>
      <script type="text/javascript">
      //<![CDATA[
      var jmlkomentar = 5;
      var jmlkarakter = 60;
      //]]></script>
      <script src="http://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar-Tooltip.js" type="text/javascript"></script>
      <script src="http://sijalupangna.blogspot.com/feeds/comments/default?alt=json&amp;callback=tampilkankomentar" type="text/javascript"></script>

      Pilih Tata Letak >> tambahkan Gadget >> HTML/JavaScript
      kemudian masukan kode didalamnya.
      o..iya mas jangan lupa kunjungi blog saya yang satunya:
      http://jalu-pangna.blogspot.com
      ditunggu... :)

      Hapus
    5. trima kasih atas perhatiannya mas saya lansung ke tkp.....

      Hapus
  8. Sore mas kunjungan baru ini yang namanya imron fhatoni siapa tau mas penasaran hehehehhe....
    saya masih kecil kalau mas tdak kbrtanpanggil saya seperti panggilan murid2ya mas di skolah salam kenal mas...
    saya dari NTB sumbawa...

    BalasHapus
    Balasan
    1. Met malam mas suonk, Ga apa-apa saya panggil mas saja. Salam kenal juga. Saya dari banten..terima kasih atas kunjungannya. :)

      Hapus
    2. mas kalau ada waktu mampir kapan22 di blog perdana saya..
      http://samawaberbudaya.blogspot.com

      salam hangat...

      Hapus
    3. ok mas, segera meluncur ke TKP.. :)

      Hapus
  9. mantab.. terimakasih banyak buat script tutorialnya...

    http://bit.do/2SXk

    BalasHapus
  10. Linknya sdah saya pasang di blog mas. mohon link balik! kckck

    Salam kenal mas!

    BalasHapus
    Balasan
    1. ok..segera meluncur ke TKP :)

      Hapus
    2. alaikumussalaam..salam kenal kembali and happy blogging..!

      Hapus
  11. Anda punya masalah yg tdk bisa terselesaikan silakan kunjungi Situs terpercaya ini,>>>KLIK DI SINI<<< Atau tlpn Ki Barong di nomor 0852-8895-8775
    Sebab kemarin Saya Mendapat Bantuan dari beliau yaitu Bantuan PESUGIHAN PUTIH TAMPA TUMBAL dan Alhamdulillah segalah sesuatunya berjalan lancar dan kami berhaail dapatkan Uang sebesar Rp.475juta,
    Jadi lewat tempat ini saya ingin berbagi buat yg lagi kesulitan tentang masalah:
    #Ekonomi
    #Terlilit Hutang
    #masalah pekerjaan Dan lain sebagainya
    Jadi sekali lagi Bagi yg punya masalah Silahkan Tlpn/kunjungi Situs/web Ki Barong dgn cara Klik Link >>>KLIK DI SINI<<< Untuk Info Pesugihan Putih Tampa Tumbal Milik Ki Barong
    Atau Chat di WhatsApp di nomor +6285288958775
    Buat teman tolong Bantu share supaya saudara2 kita yg punya masalah bisa terbantu juga Masalah yg mereka hadapi sekian terimahkasi Sudah di ijinkan Numpang Post.

    BalasHapus

  12. Admin numpang promo ya.. :)
    cuma di sini tempat judi online yang aman dan terpecaya di indonesia
    banyak kejutan menanti para temen sekalian
    cuma di sini agent judi online dengan proses cepat kurang dari 2 menit :)
    ayo segera bergabung di fansbetting atau add WA :+855963156245^_^
    F4ns Bett1ng agen judi online aman dan terpercaya
    Jangan ragu, menang berapa pun pasti kami proseskan..
    F4ns Bett1ng

    "JUDI ONLINE|TOGEL ONLINE|TEMBAK IKAN|CASINO|JUDI BOLA|SEMUA LENGKAP HANYA DI : WWw.F4ns Bett1ng.COM

    DAFTAR DAN BERMAIN BERSAMA 1 ID BISA MAIN SEMUA GAMES YUKK>> di add WA : +855963156245^_^

    BalasHapus

Back to Top