Cara Membuat Popup Like FB di Blog

Kali ini akan kami share tentang Cara Membuat Popup Like FB di Blog, fungsi popup tersebut selain agar semakin banyak pengunjung juga sebagi viral marketing. Langkah pertama adalah siapkan Fan Page Facebook anda, selanjutnya buka blog anda dan masuk ke menu Layout. Tambahkan Widget HTML serta paste kode script di bawah, 

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

<style>

#fanback {

  display:none;

  background:rgba(0,0,0,0.8);

  width:100%;

  height:100%;

  position:fixed;

  top:0;

  left:0;

  z-index:99999;

}

#fan-exit {

  width:100%;

  height:100%;

}

#fanbox {

  background:white;

  width:420px;

  height:270px;

  position:absolute;

  top:58%;

  left:63%;

  margin:-220px 0 0 -375px;

  -webkit-box-shadow: inset 0 0 50px 0 #939393;

  -moz-box-shadow: inset 0 0 50px 0 #939393;

  box-shadow: inset 0 0 50px 0 #939393;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  margin: -220px 0 0 -375px;

}

#fanclose {

  float:right;

  cursor:pointer;

  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41hXc1nkZL45zkRmi2-dWIJwK0QsRUaXgrlwcVg8mlryxTSrIAzEj5N0hV2qSTk3vWVAeA2IietWec4tCihyphenhyphena2Gtg0umCfNEXTWfE-KVlt1WG8extdyt6xbkX-Fod8JGSU7LDSETwPlu-/s1600/fanclose.png) repeat;

  height:15px;

  padding:20px;

  position:relative;

  padding-right:40px;

  margin-top:-20px;

  margin-right:-22px;

}

.remove-borda {

  height:1px;

  width:366px;

  margin:0 auto;

  background:#F3F3F3;

  margin-top:16px;

  position:relative;

  margin-left:20px;

}

#linkit,#linkit a.visited,#linkit a,#linkit a:hover {

  color:#80808B;

  font-size:10px;

  margin: 0 auto 5px auto;

  float:center;

}

</style>

<script type='text/javascript'>

//<![CDATA[

jQuery.cookie = function (key, value, options) {

  // key and at least value given, set cookie...

  if (arguments.length > 1 && String(value) !== "[object Object]") {

    options = jQuery.extend({}, options);

    if (value === null || value === undefined) {

      options.expires = -1;

    }

    if (typeof options.expires === 'number') {

      var days = options.expires, t = options.expires = new Date();

      t.setDate(t.getDate() + days);

    }

    value = String(value);

    return (document.cookie = [

      encodeURIComponent(key), '=',

      options.raw ? value : encodeURIComponent(value),

      options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE

      options.path ? '; path=' + options.path : '',

      options.domain ? '; domain=' + options.domain : '',

      options.secure ? '; secure' : ''

    ].join(''));

  }

  // key and possibly options given, get cookie...

  options = value || {};

  var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;

  return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;

};

//]]>

</script>

<script type='text/javascript'>

jQuery(document).ready(function($){

  if($.cookie('popup_facebook_like') != 'yes'){

    $('#fanback').delay(5000).fadeIn('medium');

    $('#fanclose, #fan-exit').click(function(){

      $('#fanback').stop().fadeOut('medium');

    });

  }

  $.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 });

});

</script>

<div id='fanback'>

  <div id='fan-exit'></div>

  <div id='fanbox'>

   <div id='fanclose'></div>

   <div class='remove-borda'></div>

   <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/..........&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>

  </div>

</div>

Cara Pengeditan yaitu :

• Ubah https://www.facebook.com/braderblog dengan ID Halaman Facebook sobat.

• Jika tidak diubah, widget ini akan muncul 5 detik setelah halaman Blog selesai dimuat. Ubah angka "5000" di dalam kode$('#fanback').delay(5000).fadeIn('medium'); . 1 detik = 1000, 5 detik = 5000, 10 detik=10.000.

• Jika tidak diubah, widget ini akan muncul 7 hari sekali untuk satu pengunjung unik. Jika ingin mengubahnya, ubah angka "7" di dalam kode $.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 }); . 1 hari = 1, 5 hari = 5, 7 hari = 7.

•  Banyak kode tampilan yang bisa sobat edit, salah satunya pada kode yang saya beri warna biru. Silakan berkreasi.

4. Jika telah selesai, klik Simpan.

Demikian tutorial tentang Cara Membuat Popup Like FB di Blog. Selamat mencoba dan semoga berhasil.

Anda baru saja membaca artikel yang berkategori Cara Membuat Popup Like FB di Blog / fb like di blog / popup blog / Popup Like FB di blog dengan judul Cara Membuat Popup Like FB di Blog. Anda bisa bookmark halaman ini dengan URL https://semuatutorial.blogspot.com/2014/02/cara-membuat-popup-like-fb-di-blog.html. Terima kasih!

Ditulis oleh: Unknown - Rabu, 19 Februari 2014