0 Cara Membuat Widget FB Like Melayang

X-2share-huft............panasnya siang ini yah,,assikknya minum es kelamud plus dengerin lagu..sambil online yah,,mantab..tapi siang ini saya mau berbagi ilmu blogger bagi sobat2 yang pengen tau bagaimana Cara membuat widget FB like Melayang Saya akan membahasnya kali ini...^_^..

 
oke pertama2..berikut kode Html nya biasanya di taruh di atas </body>

<div id='kotak-facebook'>

Konten di sini / widget di sini

<a class='close' href='#'>&times;</a>
</div>

Lalu berikut Css nya...Biasanya di taruh di atas kode ]]></b:skin>

#kotak-facebook {
  position:fixed !important;
  position:absolute; /* IE6 */
  bottom:-1000px;
  left:50%;
  margin:0px 0px 0px -182px;
  width:300px;

  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:#eee2e2; 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;
}

Setelah itu ini Javascriptnya...

<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) diklik
     $('a.close').click(function() {
          $(this).parent().fadeOut();
     return false;
     });

});
</script>

Selesai sudah sob..ini keterangannya...

• Konten di sini / widget di sini = Tempat kode FB like sobat
• width:300px; height:auto; = Atur sesuai sobat inginkan berapa lebarnya dan tingginya 
• background-color:#eee2e2; font:normal 1em Cambria,Georgia,Serif;= warna background kotaknya dan fontnya bisa sobat ganti terserah maunya apa,,.
• -webkit-box-shadow: 0px 0px 7px #222; -moz-box-shadow: 0px 0px 7px #222;box-shadow: 0px 0px 7px #222; = kalo ini bayangan box nya,,
• -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; = kalo ini border radiusnya,,

Kalo cara di atas panjang n sobat males untuk berikut cara yang cukup pendek..
Copas aja kode di bawah ini :

<style type='text/css'>   
#kotak-facebook {

      position:fixed !important;

      position:absolute; /* IE6 */

      bottom:-1000px;

      left:50%;

      margin:0px 0px 0px -182px;

      width:300px;

      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:#eee2e2; 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) diklik

         $('a.close').click(function() {

              $(this).parent().fadeOut();

         return false;

         });

    });

    </script>


    <div id='kotak-facebook'>

<--------KODE DI SINI FB LIKE DI SINI--------------->

    <a class='close' href='#'>&times;</a>

    </div>

 Sekian tutorial dari saya...semoga bermanfaat bagi sobat..^_^

Komentar →