Membuat Widget Like Facebook Melayang

1:43 AM  Arek Drafter_CAD  No comments

Haloo .... Semuanya saya bukan blogger yang hebat saya ini pemula dan tips / tricks dibawah sangat berguna mungkin buat para blogger pemula seperti saya.
Karena saya sempat binggung bagaimana cara membuat sesuatu yang melayang di blog ( Tidak Fixed), setelah saya coba browsing cukup lama... Akhir saya dapatkan dan caranya sama semua dan ada juga beda tapi hasilnya juga sama. Mungkin ini paling simple / mudah.


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 ANDA DI SINI
    <a class='close' href='#'>&times;</a>

    </div>


Selamat mencoba teman. Semoga bermanfaat buat kita semua. Amin

Related Post:

Tips Tricks
Tips Blogspot

Widget by [ Iptek-4u ]

Posted in: ,

Get this widget

0 comments:

Post a Comment