Cara Membuat Popup Like FB Di Blog

Memasang widget pop up like facebook adalah cara ampuh untuk mendapatkan like fanspage facebook dari para pengunjung, cara ini adalah cara yang paling digemari oleh sebagian blogger. Widget like fanspage facebook ini bisa dipasang dengan berbagai cara, mulai dari memasangnya di sidebar, popup melayang, widget yang terus nempel di sidebar, dan lain2. Beberapa cara memasang widget like fanspage facebook ini dapat mengganggu penglihatan pengunjung yang sedang membaca artikel, dan bisa berakibat negatif karena bisa saja pengunjung mengclose blog kita.

Saya akan memberikan cara memasang widget like facebook tanpa mengganggu pandangan pengunjung dengan cara memasangnya di widget pop up yaitu widget yang hanya muncul sekali dalam sehari saat pengunjung mengunjungi blog.

Contoh widget pop up like facebook :

Cara Membuat Pop Up Like Fanspage Facebook :

1. Login ke dashboar blogger

2. Klik pada bagian Tata Letak

3. Klik Tambahkan Gadget (terserah mau dibagian mana, kalau bisa di Sidebar aja)

4. Akan muncul pop up baru, cari dan klik HTML/Javascript

5. Masukkan Kode scriptnya (kode script ada dibawah)

6. Judul kosongkan saja, dan klik simpan.

Masukkan Kode Script ini di Step 5

<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/AVvXsEgLXlI-Xl3HFHb8x6vG3c_nZkbGYiThlx-oKXYCfAWTCu7NO1fHz1P2ysI2C2JLobBck8fooAUobznzS9vXI6Y2WJW3JLJyQHukD_dGfb7r6Rsgcv2k6IjnVQnuESKsvDxN3XY_FErDvS2T/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: 1 });
});
</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/bangsharing&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>

•  Ubah https://www.facebook.com/bangsharing dengan ID Halaman Fanspage Facebook anda.
•  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 1 hari sekali untuk satu pengunjung unik. Jika ingin mengubahnya, ubah angka "1" di dalam kode $.cookie('popup_facebook_like', 'yes', { path: '/', expires: 1 }); . 1 hari = 1, 5 hari = 5, 7 hari = 7. 

Dan selamat widget pop up like fanspage kita telah muncul di blog anda, Jika masih ada yang kurang paham silahkan tanyakan di kolom komentar.