Announcement:

Selamat Datang di website Mas-Greget. Terimakasih sudah berkunjung ^_^

Minggu, 28 Juli 2013

Cara Mudah Membuat Like Box Melayang di Blog

Apa tujuan anda membuat fanspage facebook? pastinya untuk mempromosikan sebuah produk yang telah anda buat bukan. nah blog adalah sebuah sarana atau media yang sangat bagus untuk mempromosikan fanspage anda agar mempunyai banyak like. 

Maka saya kali ini akan memberikan sebuah cara yang mudah bahkan sangat mudah untuk membuat Like Box Melayang di Blog. 

Simak baik baik langkah berikut ini : 
1. Pertama anda wajib mempunyai Halaman Blog atau Fans page di Facebook dan script Widget Like Box Facebok-nya. jika sudah mempunyai 2 persyaratan tersebut, mari kita lanjut ke langkah berikutnya.

2. Masuk pada bagian Tata Letak. Klik Tambahkan Gadget di posisi mana saja tidak jadi masalah. Karena hasilnya tetap akan melayang di halaman Blog.

3. Pilih HTML/Javascript. Kemudian Masukan Kode Berikut.


<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:40%;
      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 Dulu,<blink> Sebelum Baca Gaan !!!</blink> </p>
<!-- Mulai --!>

-----Letakan Script Widget Like Box Facebook disini-----

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right;  margin-right:35px;  font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://mas-greget.blogspot.com">Mas Greget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://mas-greget.blogspot.com/2013/07/cara-mudah-membuat-like-box-melayang-di.html">Get This Widget</a>
</p>
</div>

Catatan : Masukan script Widget Like Box Facebook yang telah anda dapatkan pada tulisan berwarna merah (hapus tulisan berwarna merah). Ubah tulisan berwarna biru dengan pesan-pesan pada widget yang anda inginkan. Script di atas memuat kode-kode warna, ukuran dan posisi yang bisa anda ubah sesuai keinginan. Namun tidak diubah pun sudah bagus, posisinya berada tepat ditengah halaman. Hasilnya akan terlihat seperti ini.



4. Klik Simpan dan Selesai.

Mudah bukan? sekarang lihat blog anda. apakah ada perubahan? jika iya katakan Alhamdulillah :)
Share it Please

Unknown

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

3 komentar:

Copyright @ 2013 Maz-Greget. Designed by Templateism | Love for The Globe Press