>
Submit

Kamis, 04 Juli 2013

Cara Memasang Widget Like Box Facebook Melayang di Blog

Hai sobat CyberSB.
Kali ini saya akan mengshare tentang "Cara Memasang Widget Like Box Facebook Melayang di Blog"
Ya. Pasti para blogger sepeti sobat butuh Like Box di blog sobat, agar pengunjung lebih banyak.

Tutorial/Cara/Langkah-langkah memasang widget Like Box melayang di Blog :
1. Sobat login ke akun blogger.
2. Pergi ke http://developers.facebook.com/docs/reference/plugins/like-box/ untuk mendapatkan script Like Boxnya.
3. Setelah mendapatkan Scriptnya, pergi ke Tata Letak
4. Klik tambah gadget
5. Pilih mode HTML/Javascript
6. Masukkan kode dibawah ini

<!-- 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;"><blink> Like My Fanpage </blink> </p>
<!-- Mulai --!>

-----Letakan Script Widget Like Box Facebook anda disini-----

<!-- 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://cybersb.blogspot.com">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://cybersb.blogspot.com/2013/07/cara-memasang-widget-like-box-facebook.html">Get This Widget</a></p>
    </div>


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


8. Klik Save/Simpan



Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari CyberSB.com di inbox anda:


0 komentar:

Poskan Komentar

Jangan berkomentar dengan Anonim atau menyebarkan link hidup atau pun link mati, Jangan SARA, Porn, Fitnah

Melanggar : Hapus