Ads by BuzzCity

Senin, 21 Mei 2012

Membuat Widget Like Facebook Melayang New Version

Selamat sore sahabat blogger semuanya. Kami membagikan sebuah trik yang biasa kita jumpai ketika masuk ke Blog Caritaunya seperti Widget Like Facebook Melayang.

Kali ini saya mempunyai trik yang sangat portebel mengenai Membuat Widget Like Facebook Melayang New Version.

Sekarang perhatikan Code Script yang saya rubah dan saya revisi, agar hasilnya bisa sempurna. Dan lihat perbedaannya Code Script  Membuat Ads Popup Dengan Efek Jquery dan Code Script Membuat Widget Like Facebook Melayang New Version, sangat berbeda.

Berikut Tips-Nya :

Langkah 1
Masuk ke Menu Rancangan

Langkah 2
Tambah Gadget HTML/JavaScript

Langkah 3
Copy Paste Kode dibawah ini dan Simpan lihat hasilnya


<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) di klik

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

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

         return false;

         });

    });

    </script>


    <div id='kotak-facebook'>

<--------KODE SCRPIT LIKE FACEBOOK DI SINI--------->

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

    </div>



Sekian Tips and Trik kali ini. Semoga bermanfaat buat kita semua. Amin

Tidak ada komentar:

Poskan Komentar

Related Posts Plugin for WordPress, Blogger...