Selamat Datang Di Blog Saya Makassar Community

Minggu, 19 Mei 2013

Cara Membuat Like Box Facebook Melayang Di Tengah Blog


 Kali Ini kita akan membuat atau memasang like box fans page facebook melayang di blog atau blogger dan tentunya dengan menyertakan tombol keluar atau close hanya dengan satu klik saja, untuk panduan Memasang Like Box Melayang Di Blog ini akan menghasilkan tampilan seperti pada gambar di samping yang tepatnya like box ini akan tampil setelah loading page selesai yang langsung berada di tengah pada atas halaman blog kita, yang akan kita buat ini ialah like box melayang yang di sertai border/garis dengan menggunakan table yang diberi background warna putih, baiklah mari kita langsung saja menuju langkah-langkah berikut ;


1. Login ke Blogger.com
2. Klik Rancangan
3. Di Elemen Laman klik Tambah Gadget
4. Lalu tambahkan HTML/JavaScript
5. Masukan script di bawah ini kedalamnnya

<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:60%;
      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;">Like ya sahabat blogger :)<blink> makasih </blink> </p>
<!-- Mulai --!>

Isi  Dengan Script/code Like Box fans page anda Disini

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


Penting sob..!!
Jangan lupa taruh  Script/code Like Box fans page anda di script tadi..
untuk melihat script nya ada bisa liat disini

semoga postingan saya bermanfaat buat anda :)

3 komentar:

  1. ijin nyimak gan...
    http://sakarepurang.blogspot.com/

    BalasHapus
  2. mantab.. terimakasih banyak buat script tutorialnya...

    http://bit.do/2SXk

    BalasHapus