Cara Memasang Widget Like Box Facebook Melayang di Blog ( Floating LikeBox )

Thursday, 8 August 2013

Anda tertarik dengan widget like facebook melayang seperti punya saya ?
Jika anda ingin memasang widget floating like facebook seperti di blog saya ini
Anda cukup ikuti tutorial yang coba saya berikan untuk membuat tombol like facebook melayang di blog.

1. Pertama anda wajib mempunyai Halaman Fan Page Facebook dan script Widget Like Box Facebok-nya.
untuk mendapatkan script like box kunjungi halaman ini
http://developers.facebook.com/docs/reference/plugins/like-box/
NB : disana akan ada 2 script yang akan kita gunakan nanti
Script pertama letakan di atas kode <body> jika tidak ada letakan diatas kode <head>
2. Login ke akun Blogger.
3. Masuk pada bagian Tata Letak.
4. Klik Tambahkan Gadget di posisi mana saja tidak jadi masalah. Karena hasilnya tetap akan melayang di halaman Blog.
5. Pilih mode HTML/Javascript.
6. Masukan kode berikut.

<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:40%;
      margin:0px 0px 0px -182px;
      width:310px;
      height:auto;
      padding:16px;
       -webkit-box-shadow: 0px 0px 7px #222;
      -moz-box-shadow: 0px 0px 7px #222;
      box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
      color:#111;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;}
    #kotak-facebook a.close {
      position:absolute;
      top:-10px;
      right:-10px;
      background:#333;
      font:bold 16px Arial,Sans-Serif;
      text-decoration:none;
      line-height:22px;
      width:22px;
      text-align:center;
      color:#fff;
      border:2px solid #fff;
      -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      border-radius:10px;
      cursor:pointer;
    }
</style>
    <script type='text/javascript'>
    $(window).bind("load", function() {
         // animasikan nilai top saat halaman telah selesai dimuat
         $('#kotak-facebook').animate({bottom:"50px"}, 1000);
        // hilangkan kotak pesan saat tombol (x) di klik
         $('a.close').click(function() {
             $(this).parent().fadeOut();
         return false;
         });
    });
    </script>
    <div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Joint With Us,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

-----Ganti ini dengan script ke dua yg telah anda dapatkan-----

<!-- Selesai --!><a class='close' href='#'>×</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="baregosteam.blogspot.com">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="https.baregosteam.blogspot.com/tips">Get This Widget</a></p>
    </div>

#Masukan script Widget Like Box Facebook script yang kedua pada tulisan berwarna merah (hapus tulisan berwarna merah). Ubah tulisan berwarna biru dengan pesan-pesan pada widget yang anda inginkan.
Script di atas memuat kode-kode warna, ukuran dan posisi yang bisa anda ubah sesuai keinginan. Namun tidak diubah pun sudah bagus, posisinya berada tepat ditengah halaman. Hasilnya akan terlihat seperti ini.

Cara Memasang Widget Like Box Facebook Melayang di Blog ( Floating LikeBox )

2 comments