Floating Facebook Page's Widget

   Floating Facebook Page's Widget atau dalam bahasa indonesia itu halaman facebook yang melayang merupakan salah satu cara ampuh untuk menghemat tempat pada suatu halaman web/blogspot.

   Oke Sob kali ini Blogsaya04 mau share cara memasang widget yang satu ini.
Berikut langkah-langkahnya :

1. Login Blogger (bagi pengguna blogger)
2. Masuk ke "Tata Letak"
3. Tambah Gadget ===> HTML/JavaScript
4. Masukkan kode di bawah ini :


<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-900px;
      right:10%;
      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;"> Mohon bantuannya kak, <blink> Thank's...!!! </blink> </p>
<!-- Mulai --!>

--------------------- MASUKKAN HTML SOBAT DI SINI ------------------

<!-- 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="https://www.facebook.com/"> Facebook </a> , <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://blogsaya04.blogspot.com/2014/01/floating-facebook-pages-widget.html"> Get this widget</a></p>
    </div>


5. Masukkan HTML halaman Facebook sobat setelah kode  <!-- Mulai --!>
6. Simpan dan lihat hasilnya


   Semoga bermanfaat Sob...


.