Skip to main content

Cara Membuat Widget Facebook Fan Page Like Melayang di Blog





Seperti yang dikatakan judul saya kali ini ingin memberi tahu pada agan, bagaimana Cara Membuat Widget  Facebook Fan Page Like Melayang di Blog pada blog sendiri caranya cukup simple dan mudah hanya memasukan scriptnya dan edit sedikit, oh iya bila berhasil tampilanya akan seperti iklan melayang pada blog ini, untuk tutorialnya simak ulasan dibawah ini:

  1. Login dulu seperti biasa ke www.blogger.com untuk mengedit tataletak dari sebuah widget
  2. Jika sudah pilihlah tataletak dan dan pilih +Tambahkan Gadget lihat foto dibawah ini 
  3. Lalu nanti kamu pilih HTML/JavaScript seperti gambar dibawah ini 
  4. Masukanlah script dibawah ini pada kotak konten:
    <style type='text/css'>
    /* Message Box */
    #box-message {
    position:fixed !important;
    position:absolute;
    top:-1000px;
    left:50%;
    margin:0px 0px 0px -182px;
    width:300px;
    height:-1000PX;
    padding:16px;
    background:#fff;
    font:normal Dosis, Georgia, Serif;
    color:#111;
    border:2px solid #333;
    -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;
    }
    #box-message a.close {
    position:absolute;
    top:-10px;
    right:-10px;
    background:#fff;
    font:bold 16px Arial, Sans-Serif;
    text-decoration:none;
    line-height:22px;
    width:22px;
    text-align:center;
    color:#111;
    border:2px solid #333;
    -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:22px;
    -moz-border-radius:22px;
    border-radius:22px;
    cursor:pointer;
    }

    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type='text/javascript'>
    $(window).bind("load", function() {
    // Animate Top Value When Page Loaded Completed
    $('#box-message').animate({top:"50px"}, 1000);
    // Remove Mailbox When Close Button On Click
    $('a.close').click(function() {
    $(this).parent().fadeOut();
    return false;
    });
    });
    </script>
    <div id='box-message'>
    <!-- HTML Start -->
    <center><a class="murub">BANTU SAYA UNTUK DONASI GAN!!</a></center>
    <center><a class="murub">TOLONG LIKE FANS PAGE FACEBOOK SAYA GAN!!  </a></center>
    <center><a class="murub"> ---------------------</a></center>
    <center>
    <iframe src="//www.facebook.com/plugins/likebox.php?href=https://web.facebook.com/Belajarngulikblogspotcom-770040406428872/?ref=settings&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
    </center>
    <!-- HTML End -->
    <a class='close' href='#'>&times;</a>
    <p style=" float:right; margin-right:35px; font-size:10px;" ></p></div>

    Seperti gambar dibawah ini 
    .
  5. Untuk script yang di warnai saya biru itu ganti dengan url alamat fan page facebook masing masing.
  6. Untuk donasinya dimohon untuk klik like pada halaman fans page facebook saya gan :D
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar