Friday, August 17, 2012

Cara Membuat Widget Facebook Like Melayang dan di Close

Sering kita lihat blog-blog menggunakan LikeBox Melayang,apa fungsi dari LikeBox Melayang?fungsinya adalah untuk menarik perhatian pera pengunjung ngelike fanpage blog kita.Dengan demikian orang yang ngelike Fanpage blog kita tambah banyak.Masalahnya gimana cara buat Like Box Melayang? Disini kita akan mengetahuinya.

1.Masuk Blogger

2.Ke tata Letak

3. Add gadget,terserah pilih yang mana saja.


4.Pilih HTML/Javascript

5.Paste code di bawah ini ke gadget sobat.

<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'>

<strong style="color: rgb(0, 0, 0);"><blink>Jangan lupa klik Suka ya sobat KID ^_^</blink></strong>
<br /><a href="https://twitter.com/dunia_kusuma" title="kusumainspirasidunia" class="twitter-follow-button" data-button="grey" data-text-color="#000000" data-link-color="#ffffff">Follow @dunia_kusuma</a><script src="//platform.twitter.com/widgets.js" type="text/javascript"></script><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fkusumami&amp;width=292&amp;height=200&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;appId=126816517366802" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:200px;" allowtransparency="true"></iframe><span style="font-size: x-small;">widget by : <a href="http://kusumainspirasidunia.blogspot.com/" target="_blank" title="sofilmendo"><b><span style="color: black;">Kusuma Inspirasi Dunia</span></b></a></span>

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

    </div>
  6. Setelah selesai jangan lupa untuk di Save.
  7. Lihat hasilnya pada blog sobat sekalian,. ^_^

NB : Ganti teks yang berwarna biru di atas dengan alamat dan nama fan page sobat sekalian.,

Semoga Bermanfaat ^_^

0 comments:

Post a Comment

Terima kasih telah berkomentar di postingan saya kali ini. Silahkan datang kembali pada post-post saya berikutnya ^_^

Click This Widget