Cara Membuat Widget Facebook Fan Page Melayang

Tutorial kali ini Saya bahas tentang cara memasang widget facebook fan page (like box), Tentunya tidak akan membuat pengunjung blog sobat merasa tidak nyaman, karena script dibawah ini sudah di lengkapi dengan tombol close, jadi bila pengunjung ingin menghilangkan box tersebut, tinggal klik tombol close saja.

Ok langsung saja langkah-langkahnya.


1. Langkah awal, login ke account blogger sobat.
2. Pada bagian Dasboard pilih tab Rancangan.
3. Tambah Widget atau Add Gadget, kemudian pilih HTML/Javascript
4. Setelah itu, Copy Paste script dibawah ini.

<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:60%;
      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'>
<!-- Mulai --!>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fforexeason&amp;send=false&amp;layout=box_count&amp;width=300&amp;show_faces=true&amp;font=lucida+grande&amp;colorscheme=light&amp;action=like&amp;height=200" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:190px;" allowtransparency="true"></iframe>
<!-- Selesai --!>
<a class='close' href='#'>&times;</a>
<p style=" float:right;  margin-right:35px;  font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://forexeason.blogspot.com">ForeXeasoN</a> </p>
    </div>

5. Ganti tulisan yang berwarna merah dengan alamat facebook fan page sobat
6. save dan lihat hasilnya

Share this

torngabeng