Memasang Pop Up Like Facebook di Awal Blog

Membuat dan Memasang widget Like Facebook di Blog

 
Memasang dan menambahkan widget Like Facebook agar tampil di awal membuka Blog adalah cara yang paling banyak digunakan dan diandalkan untuk memperbanyak orang yang menyukai halaman Blog kita di Facebook. Widget ini pun dipasang dengan berbagai cara dan posisi.
Ada yang terus menetap di suatu tempat, sticky/menempel, like facebook melayang, show hide di samping Blog, dan lain-lain. Kali ini saya akan memberikan salah satu cara pemasangan widget Like Facebook yang mungkin akan menjadi solusi dari permasalahan tersebut, yaitu dengan membuat dan memasang dan menambahkan Popup Like Facebook yang akan tampil saat membuka awal blog.

Widget ini hanya muncul satu kali untuk satu Pengunjung Unik dalam waktu yang telah ditentukan. Bisa 3 hari sekali, 7 hari sekali, 30 hari sekali, dan lain-lain. Jadi selain akan menambah Likers Fans Fage Facebook kita karena terkesan membujuk untuk melakukan Like, dengan memasang dan menambahkan Popup Like Facebook yang akan muncul di awal membuka blog ini juga setidaknya pengunjung tidak akan terganggu dengan keberadaan popup ini.

Untuk tampilannya sendiri, widget ini akan muncul 2 detik setelah halaman Blog selesai dimuat. Widget pop up Like Facebookini akan muncul di bagian tengah monitor dengan bagian selain widget akan terlihat menjadi gelap. Tidak seperti sebagian widget popup Like Facebook yang akan tertutup hanya jika pengunjung melakukan like, widget ini mempunyai kelebihan lain. Yaitu widget ini dilengkapi dengan tombol Close. Pengunjung diberi 2 pilihan, apakah akan klik Like atau Close. Pengunjung bebas menentukan untuk menyukai halaman Facebook kita atau tidak.

Jika kalian ingin membuat dan memasang pop up Like Facebook ini, silakan ikuti langkah-langkah berikut.
1. Login ke akun Blogger sobat.
2. Pada bagian Tata Letak, klik Tambahkan Gadget di posisi mana pun.
3. Pilih Mode HTML/Javascript dan masukan script di bawah ini.

<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/AVvXsEhR4cFUkFuXFwKOby_XcoQUpI-liUW2uqcLU5-MRl3Kq7QI20Uu-kQw3zHs3YgeSMdIPH7bDONya4HUTBn_0euSv81kojR4iyR23qqFJrer2a6Q8QoFb-sMzlldRC8ciHGel-R-v60sJbtl/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(2000).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/pages/Perpustakaan-dan-Arsip-Daerah-Kab-Kebumen/183469451698638&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>

Pengeditan:

• Ubah https://www.facebook.com/pages/Perpustakaan-dan-Arsip-Daerah-Kab-Kebumen/183469451698638 dengan ID Halaman Facebook sobat. 
• Banyak kode tampilan yang bisa sobat edit, salah satunya pada kode yang saya beri warna merah. Silahkan sesuaikan dengan keinginan

4. Jika telah selesai, klik Simpan.

Demikian semoga bermanfaat, senang bisa berbagi ilmu dengan kalian :)
Salam perpuseru . . .

Artikel Terkait Lainnya :